使用jQuery实现全选和反选
首先要导入jquery库(这个需要各位亲们自己来引入咯,* - * )
<script type="text/javascript" src="./js/jquery-1.9.0.js"></script>
主要<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();
});
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);
}
}
以上便是这次的主要代码咯,如果有不当的地方,忘友友多多见谅,顺便提出一些意见, 谢谢!!
![用js实现的一个加载中状态的动态效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)