解释一下:
这个代码有一个bug:当点击“全选”后,紧接着点击“反选”按钮,那么全选的复选框状态和子复选框的状态不对应。下一个版本是完整版:jQuery插件如何编写05_ 简单的全选反选插件(完整版)
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<input id="checkedAllId" type="checkbox"/>全选
<input id="btnUnCheckId" type="button" value="反选">
<ul id="list">
<li><label><input type="checkbox"/>1.时间都去哪了</label></li>
<li><label><input type="checkbox"/>2.小苹果</label></li>
<li><label><input type="checkbox"/>3.浪迹天涯</label></li>
<li><label><input type="checkbox"/>4.小花花</label></li>
<li><label><input type="checkbox"/>5.你是我的眼</label></li>
<li><label><input type="checkbox"/>6.天南地北</label></li>
</ul>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//jQuery插件(全选,反选)
jQuery.fn.extend({
"checkAll":function (isChecked) {
//this是jQuery对象
this.each(function () {
this.checked = isChecked;
})
},
"uncheck":function () {
//this是jQuery对象
this.each(function () {
this.checked = !this.checked;
})
},
//全选的复选框和子复选框的关联
"checkRelation":function ($sub) {
$parent = this;
//全选的功能(父控制子)
this.click(function () {
$sub.checkAll($parent[0].checked);
//$("#list :checkbox").checkAll(this.checked);
});
//联动(子控制父:子复选框有改变,那么父复选框也要有对应的改变)
$sub.click(function () {
//1、遍历所有的子复选框
let isChecked = true;
$sub.each(function () {
if(this.checked==false){
isChecked = false;
}
})
//2、改变父复选框的状态
$parent[0].checked = isChecked;
});
}
});
//主函数
$(function(){
//这个函数的作用是把一个复选框和很多复选框关联起来了。
$("#checkedAllId").checkRelation($("#list :checkbox"));
$("#btnUnCheckId").click(function () {
$("#list :checkbox").uncheck();
});
});
</script>