Jquery 实现全选和反选

来源：互联网发布：java 缩写编辑：程序博客网时间：2024/05/19 04:02

使用jQuery实现全选和反选

首先要导入jquery库(这个需要各位亲们自己来引入咯,* - * )

主要<body>体里面的内容为以下代码(友友们不要介意,希望多多包涵)

<ul id="list">
<li><label><input type="checkbox" value="1">1.时间都去哪儿了</input></label></li>
<li><label><input type="checkbox" value="2">2.海阔天空</input></label></li>
<li><label><input type="checkbox" value="3">3.真的爱你</input></label></li>
<li><label><input type="checkbox" value="4">4.不再犹豫</input></label></li>
<li><label><input type="checkbox" value="5">5.光辉岁月</input></label></li>
<li><label><input type="checkbox" value="6">6.喜欢你</input></label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" id="selectAll" class="btn" value="全选">
<input type="button" id="unSelect" class="btn" value="全不选">
<input type="button" id="reverse" class="btn" value="反选">

下面就是正式jquery操作咯:

1.点击全选的复选框

$('#all').click(function() {
$('#list :checkbox').attr("checked", this.checked);
});

2.全选按钮

$('#selectAll').click(function(){
$('#list :checkbox, #all').prop("checked", true);
});

3.全不选按钮

$('#unSelect').click(function(){
$('#list :checkbox, #all').prop("checked", false);
});

4.反选按钮

$('#reverse').click(function(){
$('#list :checkbox').each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
allchk();
});

5.每个复选框

$('#list :checkbox').click(function(){
allchk();
});

/**
* 检测全选框#all应该是选中状态还是未选中状态
*/
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("#all").prop("checked",true);
}else{//不全选
$("#all").prop("checked",false);
}
}

以上便是这次的主要代码咯,如果有不当的地方,忘友友多多见谅,顺便提出一些意见, 谢谢!!

0 0