2019-08-05 | Jquery | UNLOCK

Jquery实现一键全选/反选/不选

使用jQuery实现的一键全选/反选/不选
页面代码:
1
2
3
4
5
6
7
8
9
10
11
<div id="box">
<input type="checkbox" value="1">小王
<input type="checkbox" value="2">小李
<input type="checkbox" value="3">小张
<input type="checkbox" value="4">老刘
<input type="checkbox" value="5">老瓜
<input type="checkbox" value="6">老毕
</div>
<div>
<input type="checkbox" id="orChecked">全选/反选/全不选
</div>
js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#orChecked').change(function(){
if($(this).is(':checked')){
var box = $('#box').children(':checkbox');
// 复选框长度和没选中的个数一样 -> 全选
if(box.length==box.filter(':not(:checked)').length){
$('#box').children(':checkbox').prop('checked',true);
}else{
// 如果有选中个数,-> 反选
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}
}else{
// 如控制键取消选中,剩余的checkbox也取消选中
$('#box').children(':checkbox').prop('checked',false);
}
});

评论加载中