Question

jquery 全选问题 <table> <tr><td><input type="checkbox" name="all" id="all" value="全选"/>全选</td>

当全选时候就全选，再点一次就全不选，当下面的子选择框有一个没选就去掉全选按钮的勾中状态，当下面子选择框都被选中了，就自动勾上全选框

Answer 1

<script type="text/javascript">
$(function() {
    var all_checked = false;
    $(":checkbox").click(function() {
        var table = $(this).parents("table");
        if($(this).attr("id") === "all") {
            table.find(":checkbox").prop("checked", !all_checked);
            all_checked = !all_checked;
        }
        else {
            table.find(":checkbox[id!=all]").each(function (i) {
                if(!$(this).is(":checked")) {
                    table.find("#all").prop("checked", false);
                    all_checked = false;
                    return false;
                }
                $("#all").prop("checked", true);
                all_checked = true;
            });
        }
    });
});
</script>

 

<table border="1">
<tr><td><input type="checkbox" name="all" id="all" /> 全选</td></tr>
<tr><td><input type="checkbox" /> 1</td></tr>
<tr><td><input type="checkbox" /> 2</td></tr>
<tr><td><input type="checkbox" /> 3</td></tr>
<tr><td><input type="checkbox" /> 4</td></tr>
</table>