jQuery - 选中所有/取消选中所有复选框 - 然后取消选中(或检查)其他复选框

时间:2013-10-08 17:07:38

标签: javascript jquery html checkbox

JQuery 1.9.1并使用IE8和Firefox作为浏览器。

我发布了一个尚未回答的问题here - 希望通过重新制定问题我可能会得到答案。

下面是我在网页上显示的表格中的几行的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号房间,然后取消选中,所有拥有该课程的电脑都会效仿。

我使用此代码来监控会议室的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 &amp;的 204 即可。

如果我取消选中 203 ,则 204 应保持选中状态, 2号房间的复选框将进入未选中状态(不改变 204 复选框的状态)或进入不确定状态(除了直观显示已选中的状态)。

在任何时候,我都知道哪些机器已经过检查:

$("input[name*=PC]:checked").map(function () {return this.name;}).get().join(",")

这是我真正想知道的。我只是不希望 Room No 复选框指示在不再检查所有相关复选框时检查它们。我发现的所有例子都是全部检查/全部未经检查的性质。

对于如何最好地解决此问题表示感谢。

3 个答案:

答案 0 :(得分:1)

如果没有选中复选框,那么设置复选框怎么样?

$(".checkall").prop("indeterminate", true);

关于这个主题的一篇很好的文章:http://css-tricks.com/indeterminate-checkboxes/

答案 1 :(得分:1)

如何根据选中的复选框数检查复选框的数量,并将每行的主复选框设置为选中,取消选中或不确定?

<强> jsFiddle example

$('#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);
    }
});

答案 2 :(得分: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);
    }
}