如何選中或取消選中一個複選框來檢查並取消選中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

我通過更改表體中複選框的名稱從cb n到cb []（更適合服務器操作）對您的HTML代碼進行了一些修改。我還考慮到可以通過單擊另一個複選框來更改主複選框狀態的事實：如果用戶手動選擇所有其他複選框，則主複選框應反映它;另外，如果用戶在單擊主複選框以檢查所有其他複選框後取消選中某行，則主複選框應該取消選中。

你可以看到它的工作有：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>