项目中有遇到这个功能,百度了一个差不多都是点击全选的时候下面的全部选中,在点击的时候,下面的取消选中,但是。。。。。。他们忽略了一点,那就是点击下面的时候,也要实现全选的勾选与不勾选,所以,我用自己的方法做了处理,实现了全选与反选的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" onclick="allClick(this);" id="all" />全选
<div id="checkList">
<input type="checkbox" value=""/>奇奇
<input type="checkbox" value=""/>怪怪
<input type="checkbox" value=""/>马马
<input type="checkbox" value=""/>虎虎
</div>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
/**
*点击全选按钮的时候触发的事件
*/
function allClick(obj){
if($(obj).prop("checked")){
$("#checkList").find("input[type='checkbox']").prop("checked",true);
}else{
$("#checkList").find("input[type='checkbox']").prop("checked",false);
}
}
// 获取自己复选框长度
var checkList = $("#checkList>input").length;
/**
*点击子集复选框的时候
*获取选中的长度
*选中的长度跟复选框长度对比,进而判断全选按钮是否勾选
*/
$("#checkList>input").on('click',function(){
var inputs = $("#checkList>input");
var checkedCounts = 0;
for(var i=0;i<inputs.length;i++){
if(inputs[i].checked){
checkedCounts++;
}
}
if (checkedCounts < checkList) {
$("#all").prop("checked",false);
}
else{
$("#all").prop("checked",true);
}
})
</script>
</body>
</html>
注:代码直接复制过去,换个jquery.js就可以用了。