为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery扩展实现复选框批操作

标签:
JQuery

jQuery提供了扩展接口jQuery.extend(Object)和jQuery.fn.extend(Object),前者是在jQuery对象上进行扩展(同jQuery的工具方法),而后者是在jQuery对象实例集上进行扩展(通常用于制作jQuery插件)。

上图一看就明白了需求。

  • 点击全选,一组复选框全部选中;

  • 取消全选,一组复选框全部未选中;

  • 选中一组复选框中任意一个,如果一组复选框全选中,全选框选中,否则全选框未选中。

  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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../script/jquery/jquery-1.8.0.js"></script>-->    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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);


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消