Определить id массива

208

25 марта 2017, 00:27

Есть список с чекбоксами и массив вида arr{id: i; person: name; state: notActive}. Как сделать, чтобы при нажатии на определенный чекбокс state: not становился state: active.

<ul id="list">
  <li>
    <div class="field">
      <label> <input type="checkbox">First</label>
    </div>
  </li>
  <li>
    <div class="field">
      <label> <input type="checkbox">Second</label>
    </div>
  </li>
  <li>
    <div class="field">
      <label> <input type="checkbox">Third</label>
    </div>
  </li>
</ul>
<input type="checkbox"> Выбрать всех

Answer 1

Нужно перебрать все значения в массиве и у каждого поменять переменную

var arr = [], 
    $field = $('.field'), 
    $field_input = $('.field input'), 
    $all = $('#all'); 
 
// Создаём массив 
$field.each(function(i) { 
  $label = $(this).find('label'); 
 
  arr[i] = {id: i, person: $label.text(), state: false}; 
}) 
 
// Нажатие на input 
$field_input.click(function() { 
  var i = $field.index( $(this).parents('.field') ); 
   
  arr[i].state = this.checked ? true : false; 
   
  console.log( arr ); 
}); 
 
// Нажатие на checkbox "все" 
$all.click(function() { 
  if( !this.checked ){ 
    // Отключаем везде checked 
    $field.find('input').prop('checked', false); 
     
    // Изменяем переменную во всех элементах массива 
    $.each(arr, function() { 
      this.state = false; 
    }); 
  }else{ 
    // Включаем везде checked 
    $field.find('input').prop('checked', true); 
     
    // Изменяем переменную во всех элементах массива 
    $.each(arr, function() { 
      this.state = true; 
    }); 
  }; 
   
  console.log( arr ); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
  <li> 
    <div class="field"> 
      <label><input type="checkbox">First</label> 
    </div> 
  </li> 
  <li> 
    <div class="field"> 
      <label><input type="checkbox">Second</label> 
    </div> 
  </li> 
  <li> 
    <div class="field"> 
      <label><input type="checkbox">Third</label> 
    </div> 
  </li> 
</ul> 
 
<input type="checkbox" id="all"> Выбрать всех