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