Установите/снимите отметку со всех флажков

Я видел много check/uncheck всех скриптов checkboxes. Но далеко не все согласны с тем, что если бы я переключил все флажки с помощью флажка "checked all", а затем снимет одну из них в списке, флажок "checked all" все еще проверяется.

Есть ли элегантный способ обработки этого случая?

Ответ 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/

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

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

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

Ответ 2

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

// 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(){...} );

Ответ 3

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

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

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

Ответ 4

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