如何使用 jQuery 选中所有复选框？

小开

$("form input[type='checkbox']").attr( "checked" , true );

或者你可以用

校对: checkbox Selector

$("form input:checkbox").attr( "checked" , true );

我已经重写了您的 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>

小开

最佳答案

一个更完整的例子应该适用于你的情况:

$('#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>

当单击 #select_all复选框时，将选中该复选框的状态，并将当前表单中的所有复选框设置为相同的状态。

注意，您不需要从选择中排除 #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>

小开

$('.checkall').change(function() {
var checkboxes = $(this).closest('table').find('td').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});

小开

简洁明了:

$('#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>

小开

 $(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});

小开

 $(document).ready(function(){
$("#select_all").click(function(){
var checked_status = this.checked;
$("input[name='select[]']").each(function(){
this.checked = checked_status;
});
});
});

小开

由于 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);
}
});
});

小开

  $("#select_all").live("click", function(){
$("input").prop("checked", $(this).prop("checked"));
}
});

小开

$("#select_all").change(function () {


$('input[type="checkbox"]').prop("checked", $(this).prop("checked"));


});

小开

我现在偏爱这种风格。

我已经为表单命名，并在 select _ all 框中添加了一个“ onClick”。

我还从 jquery 选择器中排除了‘ select _ all’复选框，以防有人点击它时互联网崩溃。

 function toggleSelect(formname) {
// select the form with the name 'formname',
// then all the checkboxes named 'select[]'
// then 'click' them
$('form[name='+formname+'] :checkbox[name="select[]"]').click()
}

 <form name="myform">
<tr>
<td><input type="checkbox" id="select_all"
onClick="toggleSelect('myform')" />
</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>

小开

下面是我编写的一个基本的 jQuery 插件，它选择页面上的所有复选框，除了用作切换的复选框/元素:

(function($) {
// Checkbox toggle function for selecting all checkboxes on the page
$.fn.toggleCheckboxes = function() {
// Get all checkbox elements
checkboxes = $(':checkbox').not(this);


// Check if the checkboxes are checked/unchecked and if so uncheck/check them
if(this.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
}
}(jQuery));

然后简单地调用复选框或按钮元素上的函数:

// Check all checkboxes
$('.check-all').change(function() {
$(this).toggleCheckboxes();
});

小开

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;
});
}
});
});

小开

这个代码对我很有用

<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>

您只需要将类 复选框 _ 类添加到所有复选框

简单明了: D

小开

面对这个问题，以上所有的答案都不起作用。原因在于 jQueryUniform 插件(使用主题节拍)。我希望这个答案会有用:)

与 JQuery 制服合作

$('#select-all').change(function() {
var $this = $(this);
var $checkboxes = $this.closest('form')
.find(':checkbox');


$checkboxes.prop('checked', $this.is(':checked'))
.not($this)
.change();
});

小开

一个复选框可以统治所有人

对于那些仍然希望通过一个轻量级的、支持 UniformJS 和 iCheck 的插件来控制复选框的人来说，如果至少有一个受控复选框没有被选中(当然，当所有受控复选框都被选中时，他们也会被选中) ，那么我就创建了一个 JQuery checkAll 插件。

请随意查看文件页上的示例。

对于这个问题的例子，你需要做的就是:

$( '#select_all' ).checkall({
target: 'input[type="checkbox"][name="select"]'
});

这不是很简单吗？