通用全选方法

秒速五厘米 2024-02-18 18:44 15阅读 0赞

通用的全选方法，只要传入全选对象和全选作用的子项即可实现全选/全不选，要设计子项的name相同或者class相同才方便进行选取。

<html>
    <head>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <input type="checkbox" name="checkAll" id="checkAll"/>全选/全不选
     <input type="checkbox" name="subCheckName" value="a1" checked="checked" />a1
     <input type="checkbox" name="subCheckName" value="a2" checked="checked" />a2
     <input type="checkbox" name="subCheckName" value="a3" />a3
     <input type="checkbox" name="subCheckName" value="a4" />a4
    
    <script>
    /** 绑定全选事件 
     *  eg: checkAllInit($("#checkAll"),$("input[name='subCheckName']"));
     * @param checkAllObj 全选jquery对象
     * @param subCheckObjs 子选项jquery对象数组
     */
    function checkAllInit(checkAllObj,subCheckObjs)
    {
    	debugger
        var ischecked = checkAllObj.prop("checked");
        subCheckObjs.each(function(i)
        {
            $(this).prop("checked", ischecked);
        });
    
        // 绑定全选事件
        checkAllObj.off("click").on("click", function()
        {
            var isAllchecked = checkAllObj.prop("checked");
            subCheckObjs.each(function(i)
            {
                $(this).prop("checked", isAllchecked);
            });
        });
    
        // 绑定子项勾选触发全选项check
        subCheckObjs.each(function(i)
        {
            $(this).off("click").on("click", function()
            {
                if (!this.checked)
                {
                    checkAllObj.prop("checked", false);
                }
                else
                {
                    var isCheckAllType = true;
                    subCheckObjs.each(function(i)
                    {
                        console.log(this.checked);
                        if (!this.checked)
                        {
                            isCheckAllType = false;
                        }
                    });
                    checkAllObj.prop("checked", isCheckAllType);
                }
            });
        });
    }
    
    
    
    
    $(function(){
    //示例
    checkAllInit($("#checkAll"),$("input[name='subCheckName']"));
    });
    </script>
    
    </html>