Как проверить все флажки с помощью jQuery

Question

Я пытаюсь проверить все элементы, если тип ввода флажка, я пробовал разные решения, но это не сработало, я знаю, что это просто, но я не знаю, что не так с мой код:

<ul class="items"> 
    <li class="item checkall"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkAll"> 
     <span></span> 
     <p>Check All Items</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="1"> 
     <span></span> 
     <p>Learn HTML5.1</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="2"> 
     <span></span> 
     <p>Learn PHP7</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="4"> 
     <span></span> 
     <p>Program a Website</p> 
    </label> 
    </li> 
</ul> 

JQuery:

$(".checkall").click(function() { 
    $('input:checkbox').not(this).prop('checked', this.checked); 
}); 

Answer 1

id для каждого элемента в HTML страницы должны быть уникальными. Поэтому либо держите unique id, либо укажите class для checkbox вместо id и class может быть таким же. Нет уникальности для поддержки с class.

Приложить на click/change event к .checkAllcheckbox, который был изменен класс здесь вместо id и установить все .checkbox свойства на основании зарегистрированного имущества .checkAll флажком. Ниже приведен фрагмент.

$(".checkAll").on('change',function(){ 
 
    $(".checkbox").prop('checked',$(this).is(":checked")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="items"> 
 
    <li class="item checkall"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkAll"> 
 
     <span></span> 
 
     <p>Check All Items</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="1"> 
 
     <span></span> 
 
     <p>Learn HTML5.1</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="2"> 
 
     <span></span> 
 
     <p>Learn PHP7</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="4"> 
 
     <span></span> 
 
     <p>Program a Website</p> 
 
    </label> 
 
    </li> 
 
</ul>

Answer 2

Изменить ваши JS это:

$(".checkall").click(function (e) { 
    $('input[type="checkbox"]').not(this).prop('checked', this.checked); 
}); 

И добавить класс к введенному не li элемент:

<input class="checkall" type="checkbox" name="item[]" id="checkAll"> 

Вот fiddle

Answer 3

$(".checkall").click(function (e) { 

    var list = $(e.target).parents('ul'); 
    $('li:gt(0) label input:checkbox',list).attr('checked', this.checked); 

});