jQuery扩展实现复选框批操作

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

1.问题引入:

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" src="https://www.linuxidc.com/script/jquery/jquery-1.8.0.js"></script>-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.linuxidc.com/i_script/jslib/jquery.checkbox.plugins.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $.checkboxHandler("sport");
    })
</script>
<fieldset>
    <input type="checkbox" value="全选"/>全选<br/>
    <input type="checkbox" value="足球"/><label for="c1">足球</label><br/>
    <input type="checkbox" value="篮球"/><label for="c2">篮球</label><br/>
    <input type="checkbox" value="乒乓球"/><label for="c3">乒乓球</label><br/>
    <input type="checkbox" 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:
 * 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);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/97d73ce82d6b949db119f3b138c13566.html