jQuery扩展实现复选框批操作
2014-03-15 17:01
507 查看
jQuery提供了扩展接口jQuery.extend(Object)和jQuery.fn.extend(Object),前者是在jQuery对象上进行扩展(同jQuery的工具方法),而后者是在jQuery对象实例集上进行扩展(通常用于制作jQuery插件)。
1.问题引入:
上图一看就明白了需求。
点击全选,一组复选框全部选中;
取消全选,一组复选框全部未选中;
选中一组复选框中任意一个,如果一组复选框全选中,全选框选中,否则全选框未选中。
2.实现思路
全选框改变时,更加全选框的状态,更新一组复选框状态;
一组复选框中任意一个改变状态时,检查一组复选框的状态,如果检查结果是一组复选框全选中,更新全选框为选中状态,否则更新全选框为未选中状态。
3. 具体实现和使用
下文中通过对jQuery.fn.extend(Object)进行扩展来实现需求,并且使用jQuery.extend(Object)将上述需求扩展为jQuery对象上的一个方法。
HTML页面代码:
引入JavaScript文件,包括jquery和下面将要封装的功能代码;
页面定义一组复选框,并且单独定义一个复选框(该复选框的id属性值和其要操作的一组复选框的name属性值一致,如上:sport);
全选框和一组复选框具备了如上所述命名规范,即可以作为一个整体操作,完成 1 中需求功能只需要为插件提供一个能够唯一标识这一组复选框的id,如:"sport";
使用时仅需要在页面加载完成后调用jQuery扩展的对象方法jQuery.checkboxHandler(id)即可。
下面是jQuery扩展实现上述功能的代码:
本文出自 “野马红尘” 博客,谢绝转载!
1.问题引入:
上图一看就明白了需求。
点击全选,一组复选框全部选中;
取消全选,一组复选框全部未选中;
选中一组复选框中任意一个,如果一组复选框全选中,全选框选中,否则全选框未选中。
2.实现思路
全选框改变时,更加全选框的状态,更新一组复选框状态;
一组复选框中任意一个改变状态时,检查一组复选框的状态,如果检查结果是一组复选框全选中,更新全选框为选中状态,否则更新全选框为未选中状态。
3. 具体实现和使用
下文中通过对jQuery.fn.extend(Object)进行扩展来实现需求,并且使用jQuery.extend(Object)将上述需求扩展为jQuery对象上的一个方法。
HTML页面代码:
<!DOCTYPE html> <html> <head> <title>测试 jQuery extend 方法 和checkbox全选和全取消</title> <style type="text/css"> body { background-color: #eef; } div { width: 800px; height: 100px; font-weight: 10; } </style> <!--<script type="text/javascript" src="../../script/jquery/jquery-1.8.0.js"></script>--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../../i_script/jslib/jquery.checkbox.plugins.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $.checkboxHandler("sport"); }) </script> <fieldset> <input type="checkbox" id="sport" value="全选"/>全选<br/> <input type="checkbox" name="sport" id="c1" value="足球"/><label for="c1">足球</label><br/> <input type="checkbox" name="sport" id="c2" value="篮球"/><label for="c2">篮球</label><br/> <input type="checkbox" name="sport" id="c3" value="乒乓球"/><label for="c3">乒乓球</label><br/> <input type="checkbox" name="sport" id="c4" value="羽毛球"/><label for="c4">羽毛球</label><br/> </fieldset> </body> </html>说明:
引入JavaScript文件,包括jquery和下面将要封装的功能代码;
页面定义一组复选框,并且单独定义一个复选框(该复选框的id属性值和其要操作的一组复选框的name属性值一致,如上:sport);
全选框和一组复选框具备了如上所述命名规范,即可以作为一个整体操作,完成 1 中需求功能只需要为插件提供一个能够唯一标识这一组复选框的id,如:"sport";
使用时仅需要在页面加载完成后调用jQuery扩展的对象方法jQuery.checkboxHandler(id)即可。
下面是jQuery扩展实现上述功能的代码:
/** * Created with JetBrains WebStorm. * User: http://aiilive.blog.51cto.com * Date: 14-3-14 * Time: 下午2:08 * 增强jQuery中对checkbox的处理,可以对一组checkbox进行全选,全不选操作 * 需要jQuery支持 * -------------Notice------------- * 使用jQuery.checkboxHandler(id)方法对一组checkbox添加事件 * id: * id的值是一组类型是checkbox的input的name属性值, * 并且作为全选和全不选类型是checkbox的input的id属性值 * * Simple: * $(document).ready(function () { $.checkboxHandler("sport"); }) */ (function ($) { jQuery.fn.extend({ checkboxSelected: function () { var id = $(this).attr('id'); var flag = (typeof $(this).attr('checked') === 'undefined' ) ? true : false; $("input[type=checkbox][name=" + id + "]").each(function (i, n) { if (flag) { $(n).removeAttr("checked"); } else { $(n).attr('checked', "checked"); } }) }, checkboxCheck: function () { var id = $(this).attr('name'); var flag = false; $("input[type=checkbox][name=" + id + "]").each(function (i, n) { if (typeof $(n).attr("checked") === 'undefined') { flag = true; return false; } }) if (flag) { $("#" + id).removeAttr("checked"); } else { $("#" + id).attr("checked", "checked"); } } }) jQuery.extend({ checkboxHandler: function (id) { $("#" + id).bind("click", function () { $(this).checkboxSelected(); }); $("input[type=checkbox][name=" + id + "]").bind("click", function () { $(this).each(function (i, n) { $(n).checkboxCheck(); }) }) } }) })(jQuery);
本文出自 “野马红尘” 博客,谢绝转载!
相关文章推荐
- 扩展jQuery easyui tabs组件,实现根据id(或者自定义属性)操作tab标签
- 文件上传前端操作-增加文件与删除文件按钮(jquery实现)
- SharePoint:扩展DVWP - 第20部分:使用jQuery实现级联下拉框
- JQuery操作实现增删改查的详细介绍
- jQuery实现列表框双向选择操作
- jQuery插件扩展操作入门示例
- 全面解析DOM操作和jQuery实现选项移动操作代码分享
- Jquery实现定时执行操作setInterval和clearInterval、setTimeout函数
- Jquery动态添加 删除 操作实现
- jquery 操作日期、星期、元素的追加的实现代码
- 使用JQuery库提供的扩展功能实现自定义方法
- jquery实现的用户注册表单提示操作效果代码分享
- jquery获取指定表格的指定列的值 以及 操作radio,checkbox,select表单操作实现代码
- jQuery 常见操作实现方式和常用函数方法总结
- JQuery扩展方法实现Form表单与Json互相转换
- Jquery实现操作Gridview中的Checkbox全选
- JQuery.extend扩展实现同步post请求
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- 154在屏幕中绘图时设置透明度(扩展知识:为图片视图添加点击手势识别器,来实现点击事件操作)
- jquery操作select实现根据拼音动态获取姓名列表