如何使用 jQuery 检查所有复选框？

我不是 jQuery 方面的专家，但是我尝试为我的应用程序创建一个小脚本。我想检查所有的复选框，但它不正常工作。

首先，我尝试使用 attr和之后，我尝试与 prop，但我正在做一些错误的事情。

我先试了这个:

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


if (! $('input:checkbox').is('checked')) {
$('input:checkbox').attr('checked','checked');
} else {
$('input:checkbox').removeAttr('checked');
}
});

但这没用。

接下来: 这比上面的代码工作得更好

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


if (! $('input:checkbox').is('checked')) {
$('input:checkbox').prop('checked',true);
} else {
$('input:checkbox').prop('checked', false);
}
});

这两个例子都不管用。

http://jsfiddle.net/hhZfu/4/

457121 次浏览
小开
最佳答案

您需要使用 。道具()来设置选中的属性

$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

演示: 小提琴

小开

只需使用 checkAll的 checked属性，并对选中的属性使用 这是一个非常重要的问题，我们需要找到一个合适的解决方案，这个方案可以帮助我们解决问题而不是 attr

现场演示

 $('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});

对于诸如勾选的属性，使用 prop ()而不是 attr ()

从 jQuery 1.6开始，. attr ()方法返回未定义的属性 检索和更改 DOM 属性，如 表单元素的选中、选中或禁用状态，请使用 。道具()方法

对于复选框，您有相同的 id，它应该是 独一无二。您最好使用一些带有依赖复选框的类，这样它就不会包含您不想要的 复选框。因为 $('input:checkbox')将选择页面上的所有复选框。如果您的页面使用新的复选框进行扩展，那么它们也将被选中/取消选中。这可能不是预期的行为。

现场演示

$('#checkAll').click(function () {
$(':checkbox.checkItem').prop('checked', this.checked);
});
小开

你可以使用下面的简单代码:

function checkDelBoxes(pForm, boxName, parent)
{
for (i = 0; i < pForm.elements.length; i++)
if (pForm.elements[i].name == boxName)
pForm.elements[i].checked = parent;
}

使用示例:

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>
小开

一个完整的解决方案就在这里。

$(document).ready(function() {
$("#checkedAll").change(function() {
if (this.checked) {
$(".checkSingle").each(function() {
this.checked=true;
});
} else {
$(".checkSingle").each(function() {
this.checked=false;
});
}
});


$(".checkSingle").click(function () {
if ($(this).is(":checked")) {
var isAllChecked = 0;


$(".checkSingle").each(function() {
if (!this.checked)
isAllChecked = 1;
});


if (isAllChecked == 0) {
$("#checkedAll").prop("checked", true);
}
}
else {
$("#checkedAll").prop("checked", false);
}
});
});

HTML 应该是:

选中的三个复选框上的单个复选框将被选中并取消选中。

<input type="checkbox" name="checkedAll" id="checkedAll" />


<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

希望这对别人有帮助，就像对我一样。

JS 小提琴 https://jsfiddle.net/52uny55w/

小开 
if(isAllChecked == 0)
{
$("#select_all").prop("checked", true);
}

请将上面的行更改为

if(isAllChecked == 0)
{
$("#checkedAll").prop("checked", true);
}

战略科学军团的回答和它的工作完美，谢谢

小开

为什么不试试这个(在第2行的 form # 中，你需要放置正确的 html 表单选择器) :

$('.checkAll').click(function(){
$('form#myForm input:checkbox').each(function(){
$(this).prop('checked',true);
})
});


$('.uncheckAll').click(function(){
$('form#myForm input:checkbox').each(function(){
$(this).prop('checked',false);
})
});

你的 html 应该是这样的:

<form id="myForm">
<span class="checkAll">checkAll</span>
<span class="uncheckAll">uncheckAll</span>
<input type="checkbox" class="checkSingle"></input>
....
</form>

希望能帮上忙。

小开

扣动扳机

$("#checkAll").click(function(){
$('input:checkbox').click();
});

或者

$("#checkAll").click(function(){
$('input:checkbox').trigger('click');
});

或者

$("#checkAll").click(function(){
$('input:checkbox').prop('checked', this.checked);
});
小开 
if($('#chk_all').is(":checked"))
{
$('#'+id).attr('checked', true);
}
else
{
$('#'+id).attr('checked', false);
}
小开 
function chek_al_indi(id)
{
var k = id;
var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
var std_cnt = 10;


if ($('#'+ k).is(":checked"))
{
for (var i = 1; i <= std_cnt; i++)
{
$("#chk"+ k).attr('checked',true);
k = k + cnt_descriptiv_indictr;
}
}


if ($('#'+ k).is(":not(:checked)"))
{
for (var i = 1; i <= std_cnt; i++)
{
$("#chk"+ k).attr('checked',false);
k = k + cnt_descriptiv_indictr;
}
}
}
小开 
 $('#checkall').on("click",function(){
$('.chk').trigger("click");
});
小开

Html:

    <div class="col-md-3 general-sidebar" id="CategoryGrid">
<h5>Category &amp; Sub Category <span style="color: red;">* </span></h5>
<div class="checkbox">
<label>
<input onclick="checkUncheckAll(this)" type="checkbox">
All
</label>
</div>
<div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>

Javascript:

function checkUncheckAll(ele) {
if (ele.checked) {
$('.cat').prop('checked', ele.checked);
$('.subcat').prop('checked', ele.checked);
}
else {
$('.cat').prop('checked', ele.checked);
$('.subcat').prop('checked', ele.checked);
}
}
小开

通常，如果至少有一个从属复选框未选中，那么您还希望主复选框未选中，如果所有从属复选框都已选中，则希望主复选框未选中:

/**
* Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
* @param masterId is the id of master checkbox
* @param slaveName is the name of slave checkboxes
*/
function checkAll(masterId, slaveName) {
$master = $('#' + masterId);
$slave = $('input:checkbox[name=' + slaveName + ']');


$master.click(function(){
$slave.prop('checked', $(this).prop('checked'));
$slave.trigger('change');
});


$slave.change(function() {
if ($master.is(':checked') && $slave.not(':checked').length > 0) {
$master.prop('checked', false);
} else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
$master.prop('checked', 'checked');
}
});
}

如果你想启用任何控制(例如 Remove All按钮或 Add Something按钮) ，当至少选中一个复选框时，当没有选中复选框时，禁用:

/**
* Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
* enables or disables a control when a checkbox is checked
* @param masterId is the id of master checkbox
* @param slaveName is the name of slave checkboxes
*/
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
$master = $('#' + masterId);
$slave = $('input:checkbox[name=' + slaveName + ']');


$master.click(function(){
$slave.prop('checked', $(this).prop('checked'));
$slave.trigger('change');
});


$slave.change(function() {
switchControl(controlId, $slave.filter(':checked').length > 0);
if ($master.is(':checked') && $slave.not(':checked').length > 0) {
$master.prop('checked', false);
} else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
$master.prop('checked', 'checked');
}
});
}


/**
* Enables or disables a control
* @param controlId is the control-id
* @param enable is true, if control must be enabled, or false if not
*/
function switchControl(controlId, enable) {
var $control = $('#' + controlId);
if (enable) {
$control.removeProp('disabled');
} else {
$control.prop('disabled', 'disabled');
}
}
小开

超文本标示语言

<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>


</BODY>
</HTML>

JQuery 代码

<SCRIPT language="javascript">
$(function(){


// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});


// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){


if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}


});
});
</SCRIPT>

查看演示

点击这里查看演示

小开 
            <pre>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});


// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){


if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}


});
});
</SCRIPT>
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
</pre>
小开

使用 。道具()获取属性的值

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
小开

我知道有很多答案张贴在这里，但我想张贴这优化代码，我们可以使用它的全球性。

我尽力了

/*----------------------------------------
*  Check and uncheck checkbox which will global
*  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes
*  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox \{\{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
if($("."+chk_all_cls).prop('checked') == true){
$('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
}else{
$('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
}
}


if($(".check_all").get(0)){
var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');


$(".check_all").on('change',function(){
checkUncheckAll('check_all',chiled_patter_key);
});


/*------------------------------------------------------
* this will remain checkbox checked if already checked before ajax call! :)
------------------------------------------------------*/
$(document).ajaxComplete(function() {
checkUncheckAll('check_all',chiled_patter_key);
});
}

希望这个能帮上忙！

小开

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

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

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

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

$( "#checkAll" ).checkall({
target: "input:checkbox"
});

这不是很简单吗？

小开 
    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

还有 Jquery

$(document).on('click','#checkAll',function () {
$('.checkItem').not(this).prop('checked', this.checked);
});
小开

我知道的最简单的方法是:

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

小开 

$(document).ready(function() {
$("#parent").click(function() {
$(".child").prop("checked", this.checked);
});


$('.child').click(function() {
if ($('.child:checked').length == $('.child').length) {
$('#parent').prop('checked', true);
} else {
$('#parent').prop('checked', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
<li>
<input type="checkbox" class="child" /> Checkbox 1</li>
<li>
<input type="checkbox" class="child" /> Checkbox 2</li>
<li>
<input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

HTML:

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
<li>
<input type="checkbox" class="child" /> Checkbox 1</li>
<li>
<input type="checkbox" class="child" /> Checkbox 2</li>
<li>
<input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

JQuery:

$(document).ready(function() {
$("#parent").click(function() {
$(".child").prop("checked", this.checked);
});


$('.child').click(function() {
if ($('.child:checked').length == $('.child').length) {
$('#parent').prop('checked', true);
} else {
$('#parent').prop('checked', false);
}
});
});
小开

即使返回多个结果，也可以直接对 jQuery 选择器的结果运行 .prop()。所以:

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

小开 
function checkAll(class_name) {
$("." + class_name).each(function () {
if (this.checked == true)
this.checked = false;
else
this.checked = true;
});
}
小开

我认为当用户手动选择所有的复选框，然后检查所有应该是自动选中或用户取消选中其中一个从所有选中的复选框，然后检查所有应该是自动取消选中。 这是我的密码。 

$('#checkall').change(function () {
$('.cb-element').prop('checked',this.checked);
});


$('.cb-element').change(function () {
if ($('.cb-element:checked').length == $('.cb-element').length){
$('#checkall').prop('checked',true);
}
else {
$('#checkall').prop('checked',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

小开 
$('#checkAll').on('change', function(){
if($(this).attr('checked')){
$('input[type=checkbox]').attr('checked',true);
}
else{
$('input[type=checkbox]').removeAttr('checked');
}
});
小开

Checkall 是 allcheck 框的 id，而 cb-child 是每个复选框的名称，这些复选框将根据 checkall click 事件选中或取消选中

$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";


});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
小开

* JAVA 脚本选中所有复选框 *

最佳解决方案. . 试试看

<script type="text/javascript">
function SelectAll(Id) {
//get reference of GridView control
var Grid = document.getElementById("<%= GridView1.ClientID %>");
//variable to contain the cell of the Grid
var cell;


if (Grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[0];


//loop according to the number of childNodes in the cell
for (j = 0; j < cell.childNodes.length; j++) {
//if childNode type is CheckBox
if (cell.childNodes[j].type == "checkbox") {
//Assign the Status of the Select All checkbox to the cell checkbox within the Grid
cell.childNodes[j].checked = document.getElementById(Id).checked;
}
}
}
}
}
</script>
小开

我的解决办法

$(function() {
$(".checkAll").click(function(){
checkwhat  = $(this).data("checkwhat");
$('input:checkbox.'+checkwhat).not(this).prop('checked', this.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect">check all group 1</lablel>
<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="1">  value 1.1<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"> value 1.2<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="3">  value 1.2<br>
<br>
<br>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2">check all group 1</lablel>
<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"> value 2.1<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4">value 2.1<br>


提交答案