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> 

Если пользователь нажимает на номер No 2 то все ПК в номер No 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) флажок, если он был отмечен, и один из зависимых флажков не установлен.

Например:

Если я нажимаю номер No 2, флажок для номер Нет 2 становится проверено, как будет & .

Если я снимите , то должны оставаться проверены, с флажком для номер № 2 собирается статус, который либо снят (без изменения статуса флажка для) или переходит в неопределенный статус (что-то другое, кроме визуального отображения отмеченного).

В любой момент времени, я знаю, какие машины были проверены:

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

что то, что я действительно хочу знать. Я просто не хочу отмечать флажки Room No, чтобы указать, что они проверяются, когда все зависимые флажки больше не проверяются. Все примеры, которые я нахожу, имеют полностью контролируемый/всеохватывающий характер.

Поблагодарили бы за какие-либо мысли или указания относительно наилучшего решения этой проблемы.

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