jQuery插件如何编写05_ 简单的全选反选插件(完整版)
2018-01-27 18:40
579 查看
解释一下:
这个版本是完整版,从“jQuery插件如何编写01”到“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.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){ isChecked = false; } }) //2、改变父复选框的状态 $parent.prop("checked",isChecked); } } }); //主函数 $(function(){ //这个函数的作用是把一个复选框(主复选框)、很多复选框(子复选框)和反选按钮关联起来了。 $("#checkedAllId").checkRelation($("#list :checkbox"),$("#btnUnCheckId")); }); </script>
相关文章推荐
- jQuery插件如何编写03_ 简单的全选反选插件
- jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单)
- jQuery插件如何编写02_ 简单的全选插件
- 编写一个简单的 jQuery 插件(模板)
- jquery傻瓜基础教程之教你如何制作简单的dialog插件
- 如何理解 jQuery 的插件编写方式
- 编写简单的jQuery提示插件
- 如何编写自己的jquery插件
- jQuery高级篇 简单几招学会如何制作jQuery插件
- 编写一个简单的Jquery插件
- 如何封装一个最简单的jquery插件
- 如何用正确的姿势编写jQuery插件
- jquery 插件简单编写
- 基于jQuery的简单全选插件
- 一个简单的全选Jquery插件
- jQuery-如何理解jQuery的插件编写方式
- 如何编写一个Jquery插件
- 简单实现编写自己的jQuery插件
- 简单的jquery插件编写:table换行颜色变化
- 编写jQuery插件---简单总结