Javascript 如何使用jQuery选择所有复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2228382/
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 select all checkboxes with jQuery?
提问by Darmen Amanbayev
I need help with jQuery selectors. Say I have a markup as shown below:
我需要有关 jQuery 选择器的帮助。假设我有一个标记，如下所示：
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>How to get all checkboxes except #select_allwhen user clicks on it?
除非#select_all用户单击它，否则如何获取所有复选框？
回答by Tatu Ulmanen
A more complete example that should work in your case:
一个更完整的例子应该适用于你的情况：
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
checkboxes.prop('checked', $(this).is(':checked'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>When the #select_allcheckbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.
#select_all单击复选框时，复选框的状态被选中，当前表单中的所有复选框都设置为相同的状态。
Note that you don't need to exclude the #select_allcheckbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the #select_all, you can use this:
请注意，您不需要#select_all从选择中排除该复选框，因为它与所有其他复选框的状态相同。如果您出于某种原因确实需要排除#select_all，则可以使用以下命令：
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
checkboxes.prop('checked', $(this).is(':checked'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>回答by LOL
Simple and clean:
简单干净：
$('#select_all').click(function() {
var c = this.checked;
$(':checkbox').prop('checked', c);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>回答by alexeydemin
Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:
由于 attr() 方法，最佳答案在 Jquery 1.9+ 中不起作用。使用 prop() 代替：
$(function() {
$('#select_all').change(function(){
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
});
});
回答by rahul
$("form input[type='checkbox']").attr( "checked" , true );
or you can use the
或者你可以使用
$("form input:checkbox").attr( "checked" , true );
I have rewritten your HTML and provided a click handler for the main checkbox
我已经重写了你的 HTML 并为主复选框提供了一个点击处理程序
$(function(){
$("#select_all").click( function() {
$("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
});
});
<form id="frm1">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
</table>
</form>
回答by Dragos Custura
$(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});
回答by Beena Shetty
$(document).ready(function(){
$("#select_all").click(function(){
var checked_status = this.checked;
$("input[name='select[]']").each(function(){
this.checked = checked_status;
});
});
});
回答by Abdo-Host
jQuery(document).ready(function () {
jQuery('.select-all').on('change', function () {
if (jQuery(this).is(':checked')) {
jQuery('input.class-name').each(function () {
this.checked = true;
});
} else {
jQuery('input.class-name').each(function () {
this.checked = false;
});
}
});
});
回答by Ahmed Al Bermawy
This code works fine with me
这段代码对我来说很好用
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
you only need to add class checkbox_classto all checkbox
您只需要将类checkbox_class添加到所有复选框
Easy and simple :D
简单易行：D
回答by Robin Li
$("#select_all").change(function () {
$('input[type="checkbox"]').prop("checked", $(this).prop("checked"));
});
回答by Odin Thunder
Faced with the problem, none of the above answers do not work. The reason was in jQuery Uniform plugin (work with theme metronic).I hope the answer will be useful :)
面对这个问题，以上答案没有一个是行不通的。原因是在 jQuery Uniform 插件中（与主题 metronic 一起使用）。我希望答案有用:)
Work with jQuery Uniform
使用jQuery Uniform
$('#select-all').change(function() {
var $this = $(this);
var $checkboxes = $this.closest('form')
.find(':checkbox');
$checkboxes.prop('checked', $this.is(':checked'))
.not($this)
.change();
});
