jQuery--简单的全选反选插件
2018-01-31 10:41
363 查看
解释一下:
这个代码没有吧全选前面的复选框和下面的复选框进行关联,在下一篇文章(jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单))中,会把这个功能实现了效果图:
代码:
<!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.prop("checked",isChecked); }, "uncheck":function () { //this是jQuery对象 this.each(function () { //this是jQuery包装集里每个DOM元素 this.checked = !this.checked; }) }, //功能:全选的复选框和子复选框以及反选按钮的关联, //参数$sub是子复选框, //$unCheckBtn是反选按钮 "checkRelation":function ($sub,$unCheckBtn) { let $parent = this; //功能:点击父复选框时,需要控制子复选框的选中状态 //全选的功能(父控制子) this.click(function () { $sub.checkAll($parent.prop("checked")); }); //功能:点击子复选框时,需要联动 //联动(子控制父:子复选框有改变,那么父复选框也要有对应的改变) $sub.click(function () { match(); }); //功能:点击反选按钮时,把子复选框进行反选,同时,还需要把父子复选框进行匹配 $unCheckBtn.click(function () { //子复选框反选 $sub.uncheck(); //父子进行匹配 match(); }); //把主复选框和子复选框的状态进行匹配 function match() { //1、遍历所有的子复选框 let isChecked = true; $sub.each(function () { if(this.checked==false){ is 4000 Checked = false; } }) //2、改变父复选框的状态 $parent.prop("checked",isChecked); } } }); //主函数 $(function(){ //这个函数的作用是把一个复选框(主复选框)、很多复选框(子复选框)和反选按钮关联起来了。 $("#checkedAllId").checkRelation($("#list :checkbox"),$("#btnUnCheckId")); }); </script>
相关文章推荐
- jQuery插件如何编写03_ 简单的全选反选插件
- 一个简单的全选Jquery插件
- jQuery插件如何编写02_ 简单的全选插件
- 基于jQuery的简单全选插件
- 一个简单的全选Jquery插件
- jquery插件开发(checkbox全选的简单实例)
- jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单)
- jQuery插件如何编写05_ 简单的全选反选插件(完整版)
- 简单的jquery表情插件
- JQuery最佳实践-简单图片导航插件jquery.imgNav.js
- 自己封装的简单Jquery分页插件
- jQuery简单实用的轻量级进度条插件
- 基于jquery的一个简单的脚本验证插件
- 简单实用蓝色jQuery日期选择插件
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
- 出位的template.js 基于jquery的模板渲染插件,简单、好用
- jquery.simple.tree插件,更简单,兼容性更好的无限树插件!
- 简单的jquery插件编写:table换行颜色变化
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
- jQuery 图像裁剪插件Jcrop的简单使用