<body>
<label for="nice1" class="labels"><input type="checkbox" id="nice1" name="nice" class="hello">选项一</label>
<label for="nice2" class="labels"><input type="checkbox" id="nice2" name="nice" class="hello">选项二</label>
<label for="nice3" class="labels"><input type="checkbox" id="nice3" name="nice" class="hello">选项三</label>
<label for="nice4" class="labels"><input type="checkbox" id="nice4" name="nice" class="hello">选项四</label>
<label for="nice5" class="labels"><input type="checkbox" id="nice5" name="nice" class="hello">选项五</label>
<label for="nice6" class="labels"><input type="checkbox" id="nice6" name="nice" class="hello">选项六</label>
<label for="nice7" class="labels"><input type="checkbox" id="nice7" name="nice" class="hello">选项七</label>
<label for="nice8" class="labels"><input type="checkbox" id="nice8" name="nice" class="hello">选项八</label>
<label for="nice9" class="labels"><input type="checkbox" id="nice9" name="nice" class="hello">选项九</label>
<label for="nice10" class="labels"><input type="checkbox" id="nice10" name="nice" class="hello">选项十</label>
<label for="all_c" class="all"><input type="checkbox" id="all_c" class="all_c">全选</label>
<script>
$(function(){
$('.hello').click(function(){
var cel=document.querySelectorAll('input[name="nice"]:checked');
console.log(cel.length);
if(cel.length==$('.hello').length){
$('.all_c').prop('checked',true);
}else{
$('.all_c').prop('checked',false);
}
});
$('.all_c').click(function(){
if($(this).is(":checked")){
$('.hello').prop('checked',true);
}else{
$('.hello').prop('checked',false);
}
});
})
</script>
发现这个querySelectorAll()挺好用的,但是好像兼容不是很好,不过可以学习一下。