Как по клику на кнопку правильно активировать чексбоксы?

Question

Галка выбрать всё - должна ставить галочки на всех карточках

И наоборот - если на всех карточках ниже поставили галки, то галочка "выбрать всё" сама зажигается

  $(document).on('change', '#f_all', function(){
    $('.item').each(function( index, item ) {
     let elemInput =  $(item).find('.favorites__input');
      elemInput.prop("checked", !elemInput.prop("checked"));
    })
  })

<div>
<input type="checkbox" id="f_all" class="favorites__input">
  <label for="f_all" class="favorites__label">выбрать всё</label>
</div>


<div class="item"> 
<p>1 итем</p>
  <input type="checkbox" id="f_1" class="favorites__input">
  <label for="f_1" class="favorites__label"></label>
 
</div>
<div class="item">
 <p>2 итем</p>
  <input type="checkbox" id="f_2" class="favorites__input">
  <label for="f_2" class="favorites__label"></label>
  
</div>
<div class="item">
<p>3 итем</p>
  <input type="checkbox" id="f_3" class="favorites__input">
  <label for="f_3" class="favorites__label"></label>
   
</div>

<p>всего выбрано <span>0</span> элементов</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Всё намного проще.

$(document).on('change', '#f_all', function(){
    $('.favorites__input').prop('checked', $(this).prop('checked'));  
})

$(document).on('change', '.favorites__input', function(){    
    $('#f_all').prop('checked', false);
    
    if ($('.favorites__input').length -1 === $('.favorites__input:checked').length) {
       $('#f_all').prop('checked', true);
    }    
})

<div>
<input type="checkbox" id="f_all" class="favorites__input">
  <label for="f_all" class="favorites__label">выбрать всё</label>
</div>


<div class="item"> 
<p>1 итем</p>
  <input type="checkbox" id="f_1" class="favorites__input">
  <label for="f_1" class="favorites__label"></label>
 
</div>
<div class="item">
 <p>2 итем</p>
  <input type="checkbox" id="f_2" class="favorites__input">
  <label for="f_2" class="favorites__label"></label>
  
</div>
<div class="item">
<p>3 итем</p>
  <input type="checkbox" id="f_3" class="favorites__input">
  <label for="f_3" class="favorites__label"></label>
   
</div>

<p>всего выбрано <span>0</span> элементов</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

условие

if ($('.favorites__input').length - 1 === $('.favorites__input:checked').length)

немного некорректное... лучше ориентироваться на класс, который стоит на всех чекбоксах кроме "выбрать всё". Тогда будет точно правильный подсчёт (и -1 можно будет в условии удалить). Т.е. добавить ещё один класс например. Либо смотреть на чекбоксы с классом favorites__input:checked, но без id #f_all

БЛОГ НА HUSL

Как по клику на кнопку правильно активировать чексбоксы?

Ответы (1 шт):