用jquery来实现checkbox的全选与全不选

HTML结构:

<ul>

<li>

<input type="checkbox" class="thead">全选或全不选

</li>

<li>

<ol>

<li>

<input class="one" type="checkbox">苹果

</li>

<li>

<input class="one" type="checkbox">香蕉

</li>

<li>

<input class="one" type="checkbox">草莓

</li>

<li>

<input class="one" type="checkbox">葡萄

</li>

<li>

<input class="one" type="checkbox">芒果

</li>

</ol>

</li>

</ul>

实现全选与全不选的jquery代码:

$(function () {

$('.thead').click(function () {

// prop()方法可以设置布尔类型的属性true或false

// thisChecked 等于true时复选框为选中状态

var thisChecked = $(this).prop('checked');

// 让ol中的input的checked的值等于thisChecked

$('ol input').prop('checked',thisChecked);

})

$('.one').click(function () {

// ol 中被选中的复选框个数

var num = $('ol input:checked').length;

// ol 中所有复选框的个数

var sum = $('ol input').length;

if(num == sum){

// num == sum 说明是全选

$('.thead').prop('checked',true);

}else{

$('.thead').prop('checked', false);

}

})

})