Как проверить и снять отметку со всех флажков в таблице html с отметкой или снятием флажка?

Question

У меня есть таблица со строками, каждая строка имеет флажок, а на thead есть главный флажок. Мой код:

<table border="1"> 
    <thead> 
     <tr> 
      <th><input type="checkbox" id="allcb" name="allcb"/></th> 
      <th>values</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" id="cb1" name="cb1"/></td> 
      <td>value1</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="cb2" name="cb2"/></td> 
      <td>value2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="cb3" name="cb3"/></td> 
      <td>value3</td> 
     </tr> 
    </tbody> 
</table> 

(также попробуйте here)

Может кто-нибудь помочь мне, как это сделать, если я проверю главный флажок в верхней части, все флажки будут проверены, если я снимите основной, все флажки будут сняты. Спасибо, если вы мне поможете!

Answer 1

Рабочая Демонстрационный http://jsfiddle.net/xYAfj/2/

$('#allcb').change(function(){ 
    if($(this).prop('checked')){ 
     $('tbody tr td input[type="checkbox"]').each(function(){ 
      $(this).prop('checked', true); 
     }); 
    }else{ 
     $('tbody tr td input[type="checkbox"]').each(function(){ 
      $(this).prop('checked', false); 
     }); 
    } 
}); 

Более короткий код

Рабочая Демонстрационный http://jsfiddle.net/cse_tushar/4tss8/

$('#allcb').change(function() { 
    $('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
}); 

Answer 2

$(function(){ 
     $("#allcb").click(function() { 
     var chkBoxes = $("input[id^=cb]"); 
     chkBoxes.prop("checked", !chkBoxes.prop("checked")); 
    }); 
}); 

http://jsfiddle.net/7f7Kz/2/

Answer 3

Я сделал небольшую модификацию в вашем коде HTML, изменив имена флажков в теле таблицы от cb n до cb [] (лучше для операций с сервером). Я также принял во внимание тот факт, что основное состояние флажка можно изменить, щелкнув по другому флажку: если пользователь вручную выбирает все остальные флажки, тогда основной флажок должен отражать его; Кроме того, если пользователь отключает строку после щелчка по основному флажку, чтобы проверить все остальные, то основной флажок должен быть снят.

Вы можете увидеть его работы там: https://jsfiddle.net/h6tgj02p/

<table border="1"> 
    <thead> 
     <tr> 
      <th><input type="checkbox" id="allcb" name="allcb"/></th> 
      <th>values</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" id="cb1" name="cb[]"/></td> 
      <td>value1</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="cb2" name="cb[]"/></td> 
      <td>value2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="cb3" name="cb[]"/></td> 
      <td>value3</td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
$(document).ready(function() { 

    /* 
    * Click on select all checkbox 
    */ 
    $('#allcb').click(function(e) { 
     $('[name="cb[]"]').prop('checked', this.checked); 
    }); 

    /* 
    * Click on another checkbox can affect the select all checkbox 
    */ 
    $('[name="cb[]"]').click(function(e) { 
     if ($('[name="cb[]"]:checked').length == $('[name="cb[]"]').length || !this.checked) 
      $('#allcb').prop('checked', this.checked); 
    }); 

}); 

</script>