logo标签列表

jQuery - 全选/取消所有复选框 - 然后取消（或选中）其他复选框

javascriptjqueryhtmlcheckbox
3

我正在使用IE8和Firefox作为浏览器，同时使用JQuery 1.9.1进行开发。

我曾经在这里发布了一个问题，但并未得到答案。我希望通过重新表述问题来获取答案。

以下是我在网页上显示的一张表格中的几行HTML代码。

<tr>
    <td>
        <label for="RoomNbr2" align="right">&nbsp;&nbsp;Room No 2
            <input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2">
        </label>
    </td>
    <td>
        <label for="PCNbr203" align="right">&nbsp;&nbsp;203
            <input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2">
        </label>
    </td>
    <td>
        <label for="PCNbr204" align="right">&nbsp;&nbsp;204
            <input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2">
        </label>
    </td>
</tr>
<tr>
    <td>
        <label for="RoomNbr3" align="right">&nbsp;&nbsp;Room No 3
            <input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3">
        </label>
    </td>
    <td>
        <label for="PCNbr310" align="right">&nbsp;&nbsp;310
            <input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3">
        </label>
    </td>
    <td>
        <label for="PCNbr320" align="right">&nbsp;&nbsp;320
            <input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3">
        </label>
    </td>
    <td>
        <label for="PCNbr340" align="right">&nbsp;&nbsp;340
            <input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3">
        </label>
    </td>
    <td>
        <label for="PCNbr350" align="right">&nbsp;&nbsp;350
            <input type="checkbox" align="left" id="PCNbr350" name="PCNbr350" class="RoomNbr3">
        </label>
    </td>
</tr>

如果用户点击“2号房间”，则会检查所有在“2号房间”内的电脑（每台电脑都被分配了“RoomNbr2”类）。同样地，如果勾选“2号房间”，然后取消勾选，“Room No 2”类别下的所有电脑也将遵循此操作。
我使用此代码来监视房间的“checkall”类：
$('#mytable').on('click','.checkall', function() {
   $('input.' + this.id).prop('checked', this.checked);
   });

我使用这段代码来监控表格上的单个点击：

$('#mytable').on('click', function() {
   $('input.' + this.id).prop('checked', this.checked);
    });

我需要做的是，在某个依赖复选框被取消勾选时，改变“2号房间”（或3号）复选框的状态。
例如：
如果我点击“2号房间”，则“2号房间”的复选框将被勾选，同时“203”和“204”的复选框也会被勾选。
如果我取消勾选“203”，则“204”的复选框应该保持勾选状态，“2号房间”的复选框要么变成未勾选状态（但不会改变“204”的复选框状态），要么变成一个不确定的状态（即不显示勾选状态）。
在任何时候，我知道哪些机器已经被勾选。
$("input[name*=PC]:checked").map(function () {return this.name;}).get().join(",")

这正是我想知道的。我只是不希望房间号复选框在所有依赖的复选框都未被选中时仍然显示为已选中状态。我找到的所有示例都是全选/全不选的形式。

如何最好解决这个问题，欢迎提出任何想法或方向。

3个回答
1
如何检查复选框数量与已选复选框数量，并将每行的主复选框设置为选中、未选中或不确定状态？ jsFiddle 示例 
$('#mytable').on('click', '.checkall', function () {
    $('input.' + this.id).prop('checked', this.checked);
});
$('#mytable').on('click', 'input:not(.checkall)', function () {
    var total = $(this).closest('tr').find('input:not(.checkall)').length;
    var checked = $(this).closest('tr').find('input:not(.checkall):checked').length;
    if (total == checked) {
        $(this).closest('tr').find('input:first').prop('checked', true);
        $(this).closest('tr').find('input:first').prop('indeterminate', false);
    } else if (checked == 0) {
        $(this).closest('tr').find('input:first').prop('checked', false);
        $(this).closest('tr').find('input:first').prop('indeterminate', false);
    } else {
        $(this).closest('tr').find('input:first').prop('indeterminate', true);
    }
});
1
0

这个策略怎么样？

$('input[type=checkbox]').on('click', function() {
    var clickedCb = $(this);
    var tr = $(this).closest('tr');
    var mainCb = tr.children('td input')[0]; 
    if (clickedCb == mainCb) { // probably this check is not 100% correct.
        // do the checkall stuff
    } else {
        mainCb.prop('indeterminate', true);
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接