jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单)
2018-01-23 20:08
696 查看
解释一下:
这个代码有一个bug:当点击“全选”后,紧接着点击“反选”按钮,那么全选的复选框状态和子复选框的状态不对应。下一个版本是完整版:jQuery插件如何编写05_
简单的全选反选插件(完整版)
效果图:
代码:
这个代码有一个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>
相关文章推荐
- jQuery插件如何编写03_ 简单的全选反选插件
- jQuery插件如何编写02_ 简单的全选插件
- jQuery插件如何编写05_ 简单的全选反选插件(完整版)
- 编写自己的jQuery插件简单实现代码
- 编写自己的jQuery插件简单实现代码
- 基于Jquery的简单&简陋Tabs插件代码
- 如何编写简单优雅的代码
- 简单的jquery插件编写:table换行颜色变化
- jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
- [置顶] 如何写一个简单的jQuery插件
- jquery傻瓜基础教程之教你如何制作简单的dialog插件
- JavaScript 复选框全选效果&JQuery 实现简单的tab切换效果
- 自制jQuery 复选框全选与反选插件
- jquery中实现简单的tabs插件功能的代码
- 如何编写优雅的代码:04. 设计模式(中)
- 如何利用jQuery使复选框一键全选/全不选
- 如何编写好的jQuery代码
- 编写一个简单的jQuery插件
- [C/C++]_[初级]_[如何编写简单有效代码,提高程序运行效率和性能]
- 基于jQuery的简单全选插件