全选功能的实现(兼容ie8，可以部分禁用)

注：

1.参数两个，第一个参数为全选按钮的选择器，第二个参数为除全选按钮外的其他复选框的父元素的选择器，如果其父元素为table，选择器要写为 "table tbody"。

2.可有部分按钮禁用(disabled)，例如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <input type="checkbox" class="allChecked"/>
        全选
    </div>
    <ul class="asdf">
        <li>
            <input type="checkbox"/>
        </li>
        <li>
            <input type="checkbox"/>
        </li>
        <li>
            <input type="checkbox" disabled/>
        </li>
        <li>
            <input type="checkbox"/>
        </li>
        <li>
            <input type="checkbox"/>
        </li>
    </ul>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    /**
     * 全选功能
     * @param
     * allClass  全选按钮选择器
     * tableClass  包含除全选按钮之外多有复选框的父元素选择器
     */
    function allChecked(allClass, tableClass) {
        tableStr = tableClass;
        tableStr += " input[type=checkbox]";

        notTableStr = tableClass;
        notTableStr += " input[type=checkbox][disabled]";

        checkedStr = tableClass;
        checkedStr += " input[type=checkbox]:checked";
        $(allClass).unbind("click");
        $(allClass).prop("checked", false);
        $(allClass).bind("click",function() {
            var status = this.checked;
            $(tableStr).not(notTableStr).each(function(i, dom){
                $(dom).prop("checked", status);
            });
        });
        $(tableStr).not(notTableStr).click(function() {
            if($(allClass).is(":checked") && !$(this).is(":checked")) {
                $(allClass).prop("checked",false);
            }
            var allLength = $(tableStr).not(notTableStr).length;
            if($(checkedStr).length == allLength) {
                $(allClass).prop("checked", true);
            }
        });
    }
    allChecked(".allChecked", ".asdf");
</script>
</html>

全选功能的实现(兼容ie8，可以部分禁用)

猜你喜欢