通用全选方法

最新推荐文章于 2021-07-01 17:38:28 发布

原创最新推荐文章于 2021-07-01 17:38:28 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

14 篇文章

订阅专栏

通用的全选方法，只要传入全选对象和全选作用的子项即可实现全选/全不选，要设计子项的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>