Jquery“全选”复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15879608/
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
Jquery "select all" checkbox
提问by Prim
I am trying to select all checkboxes on a page once the 'select all' checkbox is clicked and i am using jquery for this as you can see at the below link:
单击“全选”复选框后，我正在尝试选择页面上的所有复选框，并且我正在为此使用 jquery，您可以在以下链接中看到：
http://jsfiddle.net/priyam/K9P8A/
http://jsfiddle.net/priyam/K9P8A/
The code to select and unselect all checkbox is:
选择和取消选择所有复选框的代码是：
function selectAll() {
$('.selectedId').attr('checked', isChecked('selectall'));
}
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
After being stuck with it for a day, I am still not sure why I cant get it to work. Please help
在坚持了一天之后，我仍然不确定为什么我不能让它工作。请帮忙
采纳答案by Denys Séguret
Your fiddle works after I made 3 fixes:
- import of jQuery (top left menu)
- addition of the missing
isCheckedfunction - use of propinstead of
attrto check the boxes
- 导入 jQuery（左上角菜单）
- 添加缺失的
isChecked函数 - 使用道具而不是
attr检查框
回答by letiagoalves
Why don't you do it this way? It is more clear and readable
你为什么不这样做呢？它更清晰易读
$('#selectall').click(function () {
$('.selectedId').prop('checked', this.checked);
});
$('.selectedId').change(function () {
var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
$('#selectall').prop("checked", check);
});
回答by Arun P Johny
It is because the method selectAllis not avaible in the global scope.
这是因为该方法selectAll在全局范围内不可用。
In the second dropdown in the left panel Frameworks and Extensions, select no -wrap head/bodyit will work fine.
在左侧面板的第二个下拉列表中Frameworks and Extensions，选择no -wrap head/body它会正常工作。
The reason being by default onloadis selected and when onload is selected all the entered script is wrapped inside a anonymous function as given below. It will make the selectAllfunction a local method inside the anonymous function, thus your onclick event handler which uses global scope will not get access to the method causing an Uncaught ReferenceError: selectAll is not definederror.
onload选择默认情况下的原因是选择onload时，所有输入的脚本都在匿名函数内包装，如下所述。它将使selectAll函数成为匿名函数内的局部方法，因此您使用全局范围的 onclick 事件处理程序将无法访问导致Uncaught ReferenceError: selectAll is not defined错误的方法。
$(window).load(function(){
//Entered script
});
Demo: Fiddle
演示：小提琴
UpdateBut you can simplify it as
更新但您可以将其简化为
$(function(){
$('#selectall').click(function(i, v){
$('.selectedId').prop('checked', this.checked);
});
var checkCount = $('.selectedId').length;
$('.selectedId').click(function(i, v){
$('#selectall').prop('checked',$('.selectedId:checked').length == checkCount)
});
});
and remove all the onclickhandlers from input elements as shown in this demo
并onclick从输入元素中删除所有处理程序，如本演示所示
回答by Google User
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', $(this).is(":checked"));
});
});
more Optimized
回答by MG_Bautista
回答by Pavan Mehta
Assume parent checkbox has a class of mainselect and all child have class of childselect
假设父复选框有一个 mainselect 类，所有子框都有一个 childselect 类
Then selecting parent will select all checkbox and vice-versa with the code below:
然后选择父将选择所有复选框，反之亦然，代码如下：
$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
$('.childselect').attr('checked','checked');
} else {
$('.childselect').removeAttr('checked');
}
});
回答by Pratiksha Raikundaliya
$(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");
}
});
});
});
回答by pierus
A small enhancement to @letiagoalves solution, if your checkboxes have specific processing associated with a click event. Not asked for by the OP, but something I've had to do in the past. Basically, instead of directly setting the checked property of each dependent checkbox, it compares the checked state of each dependent checkbox to the selectall checkbox, and triggers a click event on those that are in the opposite state.
如果您的复选框具有与单击事件关联的特定处理，则对 @letiagoalves 解决方案的小幅增强。不是 OP 要求的，而是我过去不得不做的事情。基本上，它不是直接设置每个依赖复选框的checked属性，而是将每个依赖复选框的选中状态与selectall复选框进行比较，并对处于相反状态的复选框触发点击事件。
$('#selectall').click(function () {
var parentState = $(this).prop('checked');
$('.selectedId').each(function() {
if ($(this).prop('checked') !== parentState) {
$(this).trigger("click");
}
});
});
回答by diegosasw
You can simply add the handle function to the click event on the select all checkbox:
您可以简单地将句柄函数添加到全选复选框上的单击事件：
$('#chk-all-items').click(selectAll);
And then this function should be enough to select all or unselect all.
然后这个功能应该足以全选或取消全选。
selectAll = function (event) {
var self = this;
$('.template-item-select').each(function () {
this.checked = self.checked;
});
}
回答by AndreX
More specific solution:
更具体的解决方案：
$(document).ready(function(){
$('#checkAll').on('click', function ( e ) {
$('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th><input type="checkbox" id="checkAll"></th>
<th>Name</th>
<th>Last</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chck_box[]" value="1"></td>
<td>Joe</td>
<td>Doe</td>
</tr>
<tr>
<td><input type="checkbox" name="chck_box[]" value="2"></td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td><input type="checkbox" name="chck_box[]" value="3"></td>
<td>Bill</td>
<td>White</td>
</tr>
</tbody>
</table>