用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);

}

})

})