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