Выделить все флажки с помощью одной проверки с помощью jQuery

Question

Мне нужно установить один флажок (checkAll) и выбрать все, и если я отмениваю выбор, все тоже нужно будет отменить. Кроме того, если все они выбраны, а затем я сниму флажки «a», «b» или «c», также необходимо снять флажок «checkAll».

<input type="checkbox" value="" id="checkAll"> 
<input type="checkbox" value="a"> 
<input type="checkbox" value="b"> 
<input type="checkbox" value="c"> 

Какой триггер мне нужно использовать? Пробовал, но не удался:

$("#checkAll").click(function() { 
    alert('test'); 
}); 

Answer 1

Используйте событие change. Когда поле #checkAll будет изменено, измените остальные поля соответственно.

Чтобы изменить #checkAll окно, когда в соответствии с другими, вы могли бы сделать что-то вроде этого:

$(":checkbox").not("#checkAll").change(function() 
{ 
    $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true); 
}); 

В основном это будет выполняться, когда флажок кроме #checkAll изменений, а также изменять #checkAll в зависимости от того, есть или нет неконтролируемые поля.

Answer 2

я не изменил какой-либо из вашего кода, и это работает для меня: http://jsfiddle.net/9U2aQ/

Убедитесь, что вы ссылки на файл Jquery правильно.

Answer 3

Это должно работать:

$(':checkbox').not('#checkAll').change(function() 
    { 
     $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true); 
    }); 
    $("#checkAll").change(function() 
    { 
     $(':checkbox').attr('checked', this.checked); 
    }); 

Answer 4

Простой скрипт, который делает то, что вы хотите:

HTML:

<div> 
    <input type="checkbox" value="" id="checkAll"> 
    <input type="checkbox" value="a" class="others"> 
    <input type="checkbox" value="b" class="others"> 
    <input type="checkbox" value="c" class="others"> 
</div> 

JavaScript:

<script type="text/javascript"> 
    $("#checkAll").change(function() { 
     $(":checkbox").attr("checked", this.checked); 
    }); 
    $(".others").change(function() { 
     if (!$('input.others[type=checkbox]:not(:checked)').length) 
      $("#checkAll").attr('checked', true); 
     if (!$('input.others[type=checkbox]:checked').length) 
      $("#checkAll").attr('checked', false); 
    }); 
</script>