如何使用 jQuery 检查所有复选框？
Posted
技术标签:
【中文标题】如何使用 jQuery 检查所有复选框？【英文标题】：How to check all checkboxes using jQuery? 【发布时间】：2013-09-03 11:03:34 【问题描述】：我不是 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);
);
这两个例子都不起作用。
JSFiddle：http://jsfiddle.net/hhZfu/4/
【问题讨论】：
.prop() vs .attr()的可能重复 Select all checkboxes with jQuery的可能重复 这里是我的 codepen 的链接，它完全可以做到这一点codepen.io/nickhq/pen/pZJVEr 【参考方案1】：需要使用.prop()来设置checked属性
$("#checkAll").click(function()
$('input:checkbox').not(this).prop('checked', this.checked);
);
演示：Fiddle
【讨论】：
哇，感谢您的快速回答。这项工作很好，但在我的应用程序中，我有一张假支票。当我刷新页面ctrl+r 并单击复选框checkAll 时，他并没有检查我。之后我必须再次检查才能成功。所以我需要 2 次点击 checkAll 为什么单击（一次）不起作用？我复制粘贴该代码并创建函数checkAll() 并在复选框中设置onclick="return checkAll()"
如果你打算使用 jQuery，那么就使用 jQuery。将 jQuery 与内联 javascript 混为一谈并不是一个好主意。例如，这很糟糕：<elementtag id="someID" onclick="javascript code here" --- 而是使用 jQuery：$('#someID').click(function() checkAll() );
你的帖子this答案有什么区别，为什么用not(this).prop？
@ArunPJohny，id 在单个页面中应该是唯一的，我们如何使用类示例jsfiddle.net/52uny55w 使用相同的功能
@ArunPJohny，感谢您抽出宝贵时间。我想在 jquery 上向你学习很多东西，你能在 jquery 上给我建议吗【参考方案2】：
只需使用 checkAll 的 checked 属性并使用 prop() 而不是 attr 来检查属性
Live Demo
$('#checkAll').click(function ()
$('input:checkbox').prop('checked', this.checked);
);
Use prop() instead of attr() for properties like checked
从 jQuery 1.6 开始，.attr() 方法返回未定义的属性 尚未设置。检索和更改 DOM 属性，例如 表单元素的选中、选择或禁用状态，使用 .prop() 方法
您的复选框具有相同的 id，并且它应该是唯一的。你最好使用一些带有相关复选框的类，这样它就不会包含你不想要的 checkboxes。因为$('input:checkbox') 将选中页面上的所有复选框。如果您的页面使用新复选框进行扩展，那么它们也将被选中/取消选中。这可能不是预期的行为。
Live Demo
$('#checkAll').click(function ()
$(':checkbox.checkItem').prop('checked', this.checked);
);
【讨论】：
【参考方案3】：这里有一个完整的解决方案。
$(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/
【讨论】：
我喜欢这个解决方案，因为如果您取消选中其中一个框，“选中所有”框也将变为未选中状态。同样，如果您手动选中所有相应的框，“选中所有”框也会被选中。那里的 UI 反馈很棒！ 您可以通过将$("#checkedAll").change 函数更改为：var val = this.checked; $(".checkSingle").each( function() this.checked=val; );
另外，我认为最好将isAllChecked 变量重命名为isThereUnchecked 或unChecked，以便更能描述变量的用途。
我采用了这个解决方案，这就是我正在寻找的，谢谢
这就是我一直在寻找的东西...... Thnx！【参考方案4】：
我认为当用户手动选择所有复选框时，应该自动选中 checkall，或者用户从所有选中的复选框中取消选中其中一个，然后应该自动取消选中 checkall。 这是我的代码..
$('#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【讨论】：
谢谢！我更喜欢这个，因为在选中所有复选框之后，当我们取消选中其中一个时，选中所有复选框将被取消选中。【参考方案5】：你为什么不试试这个（在'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>
希望对你有帮助。
【讨论】：
【参考方案6】：$(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);
);
);
【讨论】：
【参考方案7】：我知道的最简单的方法：
$('input[type="checkbox"]').prop("checked", true);
【讨论】：
【参考方案8】：$('#checkAll').on('change', function()
if($(this).attr('checked'))
$('input[type=checkbox]').attr('checked',true);
else
$('input[type=checkbox]').removeAttr('checked');
);
【讨论】：
【参考方案9】：一个复选框来统治所有这些
对于仍在寻找通过轻量级插件来控制复选框的人，具有对 UniformJS 和 iCheck 的开箱即用支持，并且在至少一个受控复选框未选中时未选中（并在所有受控复选框时选中当然会检查）我创建了一个jQuery checkAll plugin。
请随时查看documentation page 上的示例。
对于这个问题示例，您需要做的就是：
$( "#checkAll" ).checkall(
target: "input:checkbox"
);
这不是很简单吗？
【讨论】：
【参考方案10】： <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);
);
【讨论】：
【参考方案11】：您可以直接在 jQuery 选择器的结果上运行.prop()，即使它返回多个结果。所以：
$("input[type='checkbox']").prop('checked', true)
【讨论】：
【参考方案12】：我的解决方案
$(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>【讨论】：
【参考方案13】：通常，如果至少 1 个从复选框未选中，您还希望主复选框未选中，如果所有从复选框都被选中，则要选中：
/**
* 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');
【讨论】：
【参考方案14】：HTML
<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>
查看演示
Click here to View Demo
【讨论】：
【参考方案15】：使用.prop() 获取属性的值
$("#checkAll").change(function ()
$("input:checkbox").prop('checked', $(this).prop("checked"));
);
【讨论】：
【参考方案16】：我知道这里发布了很多答案，但我想发布这个以优化代码，我们可以在全球范围内使用它。
我尽力了
/*----------------------------------------
* 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);
);
我希望这会有所帮助！
【讨论】：
【参考方案17】：function checkAll(class_name)
$("." + class_name).each(function ()
if (this.checked == true)
this.checked = false;
else
this.checked = true;
);
【讨论】：
【参考方案18】：checkall 是所有复选框的 id，cb-child 是每个复选框的名称，将根据 checkall 点击事件进行选中和取消选中
$("#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 = "";
);
);
【讨论】：
【参考方案19】：*选择所有复选框的 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>
【讨论】：
【参考方案20】：您可以使用以下简单代码：
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>
【讨论】：
【参考方案21】：if(isAllChecked == 0)
$("#select_all").prop("checked", true);
请将以上行改为
if(isAllChecked == 0)
$("#checkedAll").prop("checked", true);
在 s-s-r 的回答及其完美的工作中谢谢
【讨论】：
【参考方案22】：if($('#chk_all').is(":checked"))
$('#'+id).attr('checked', true);
else
$('#'+id).attr('checked', false);
【讨论】：
如果你解释了答案会很方便。 如果您选中复选框，则所有复选框都被选中为 ID，然后您取消选中该复选框，然后所有复选框都未选中【参考方案23】： $('#checkall').on("click",function()
$('.chk').trigger("click");
);
【讨论】：
【参考方案24】：html：
<div class="col-md-3 general-sidebar" id="CategoryGrid">
<h5>Category & 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);
【讨论】：
【参考方案25】： <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>
【讨论】：
代码中的脚本错误。脚本需要先加载。【参考方案26】：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;
【讨论】：
为什么是长函数？【参考方案27】：触发点击
$("#checkAll").click(function()
$('input:checkbox').click();
);
或
$("#checkAll").click(function()
$('input:checkbox').trigger('click');
);
或
$("#checkAll").click(function()
$('input:checkbox').prop('checked', this.checked);
);
【讨论】：
以上是关于如何使用 jQuery 检查所有复选框？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 检查多个复选框而不给每个复选框一个 id？