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

Question

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号用户点击，那么所有的PC在室2号（分配到个人PC的的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); 
    }); 

我需要做的是更改Room No 2（或3）复选框的状态，当它被选中并且其中一个相关复选框变为未选中时。

例如：

如果我点击房号2，为房间的复选框2号成为检查，如将 & 。

如果我取消，然后应选中，与复选框室2号去一个状态要么是未选中（不改变为的复选框的状态）或进入一个不确定的状态（除了视觉显示检查外）。

在任何给定的时间，我知道哪些机器已检查：

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

这是我真正想知道的。我不希望房间号复选框指示当所有相关复选框不再被选中时，它们会被选中。我发现的所有例子都是全部检查/全部未检查的性质。

希望对如何最好地解决此问题有任何想法或方向。

Answer 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); 
    } 
}); 

Answer 2

如果将复选框设置为不确定，如果它们未被全部检查，那么如何设置复选框？

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

关于这个问题的一篇精辟论述：http://css-tricks.com/indeterminate-checkboxes/

Answer 3

什么策略呢？

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