Проверить / снять все флажки

Question

Я видел много проверок / снятие флажков всех сценариев флажков. Но далеко не все считают, что если я установил все флажки с помощью флажка «все проверено», а затем снял один флажок в списке, флажок «все проверено» все еще установлен.

Есть ли элегантный способ обращения с этим делом?

Answer 1

$('#checkAll').click(function() {
    if(this.checked) {
        $('input:checkbox').attr('checked', true);
    }
    else {
        $('input:checkbox').removeAttr('checked');
    }
});

$('input:checkbox:not(#checkAll)').click(function() {
    if(!this.checked) {
        $('#checkAll').removeAttr('checked');
    }
    else {
        var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
        var numTotal = $('input:checkbox:not(#checkAll)').length;
        if(numTotal == numChecked) {
            $('#checkAll').attr('checked', true);
        }
    }
});

Демо: http://jsfiddle.net/ThiefMaster/HuM4Q/

Как указано в комментарии к вопросу, обычный флажок не подходит для этого.Моя реализация отключает флажок «проверить все», как только флажок один снят.Таким образом, чтобы снять все еще отмеченные флажки, вам нужно будет щелкнуть дважды (сначала, чтобы повторно проверить не проверенные, а затем снять все остальные).Однако при использовании флажка с тремя состояниями это все еще может быть необходимо, поскольку порядок состояний может быть не проверен -> неопределенный -> проверен -> не проверен, поэтому для перехода от неопределенного к непроверенному вам потребуется два щелчка.

---

Поскольку вы, вероятно, не хотите ставить ВСЕ флажки на своей странице на «Отметить все», замените input:checkbox, например, .autoCheckBox или input.autoCheckBox:checkbox и установите эти флажки class="autoCheckBox".

Если вы хотите, чтобы все флажки находились внутри определенной формы, просто используйте #idOfYourForm input:checkbox или form[name=nameOfYourForm] input:checkbox

Answer 2

Этого можно добиться, подключив обработчик щелчков к каждому из целевых флажков, и этот обработчик снимает флажок «контроль» на основе общего состояния этих целевых флажков. Итак, как-то так:

// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
  $('.targetcheckboxes').attr('checked', this.checked );
});

// Targets affect control
$('.targetcheckboxes').click( function(){
  if( $('.targetcheckboxes:not(:checked)').length ){
    $('#controlcheckbox').attr('checked',false);
  }
});

Еще лучше - вы можете присоединить эту логику к элементу контейнера и наблюдать за событием, используя .delegate():

$('#some_container').delegate('.targetcheckboxes','click',function(){...} );

Answer 3

$("#selectall").click(function(){
    var checked = $("#selectall").attr("checked");
    $(".selectone").attr("checked",checked);
});

Для настройки выберите все

 $(".selectone").click(function(){
   var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
   var flg = true;
   if(jQuery.inArray(false, net)){
     flg= false;
   }
   $("#selectall").attr("checked",flg);
 });

Answer 4

Возможно, что-то вроде этого:

$('tbody input:checkbox').change(function(){
    if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
        $('#checkAll')[0].checked = false;
    }
});

Это предполагает, что #checkAll находится в разделе thead вашей таблицы.