如何检查所有复选框使用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并设置基于.checkAll复选框的选中属性的所有.checkbox财产。以下是摘录。

$(".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); 

});