jQuery 如何通过选中/取消选中一个复选框来选中和取消选中 html 表中的所有复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17814005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to check and uncheck all checkboxes in an html table with checking/unchecking one check box?
提问by victorio
I have a table, with rows, every row has a check box, and there is a main check box at the thead. My code:
我有一个表格，有行，每一行都有一个复选框，在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>
(also try it here)
（也在这里试试）
Could anyone help me, how to do that if I check the main check box at the top, all check boxes will be checked, if I uncheck the main, all checkboxes will be unchecked. Thank you if you help me!
任何人都可以帮助我，如果我选中顶部的主要复选框，将选中所有复选框，如果我取消选中主要复选框，则所有复选框都将取消选中。如果你帮助我，谢谢！
回答by Tushar Gupta - curioustushar
Working Demo http://jsfiddle.net/xYAfj/2/
工作演示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);
});
}
});
Shorter Code
较短的代码
Working Demo http://jsfiddle.net/cse_tushar/4tss8/
工作演示http://jsfiddle.net/cse_tushar/4tss8/
$('#allcb').change(function () {
$('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
回答by Prashanth Thurairatnam
$(function(){
$("#allcb").click(function() {
var chkBoxes = $("input[id^=cb]");
chkBoxes.prop("checked", !chkBoxes.prop("checked"));
});
});
回答by Sylvain L. Kamdem
I made a little modification on your HTML code by changing the names of the checkboxes in the table body from cbnto cb[](better for server operations). I also took in account the fact that the main checkbox state can be changed by clicking on another checkbox: if the user manually selects all the other checkboxes, then the main checkbox should reflect it; also, if the user unchecks a row after clicking the main checkbox to check all the others, then the main checkbox should get unchecked.
我通过将表体中复选框的名称从cb n更改为cb[]（更适合服务器操作）对您的 HTML 代码进行了一些修改。我还考虑到可以通过单击另一个复选框来更改主复选框状态的事实：如果用户手动选择所有其他复选框，则主复选框应反映它；此外，如果用户在单击主复选框以选中所有其他复选框后取消选中一行，则主复选框应取消选中。
You can see it working there : https://jsfiddle.net/h6tgj02p/
你可以看到它在那里工作：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>
