Javascript jquery 选中所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1880313/
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 checkboxes
提问by mrpatg
I have a series of checkboxes that are loaded 100 at a time via ajax.
我有一系列通过 ajax 一次加载 100 个的复选框。
I need this jquery to allow me to have a button when pushed check all on screen. If more are loaded, and the button is pressed, to perhaps toggle all off, then pressed again toggle all back on.
我需要这个 jquery 来让我在屏幕上按下检查所有按钮时有一个按钮。如果加载更多，并按下按钮，可能会全部关闭，然后再次按下，重新打开。
This is what i have, obviously its not working for me.
这就是我所拥有的，显然它对我不起作用。
$(function () {
$('#selectall').click(function () {
$('#friendslist').find(':checkbox').attr('checked', this.checked);
});
});
The button is #selectall, the check boxes are class .tf, and they all reside in a parent div called #check, inside a div called #friend, inside a div called #friendslist
该按钮#selectall，复选框是一流的.tf，他们都居住在一个父DIV叫#check，叫里面一个div #friend，一个名为DIV中#friendslist
Example:
例子：
<div id='friendslist'>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr1'>
</div>
</div>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr2'>
</div>
</div>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr3'>
</div>
</div>
</div>
<input type='button' id='selectall' value="Select All">
回答by Teg
I know I'm revisiting an old thread, but this page shows up as one of the top results in Google when this question is asked. I am revisiting this because in jQuery 1.6 and above, prop() should be used for "checked" status instead of attr() with true or false being passed. More info here.
我知道我正在重新访问一个旧线程，但是当提出此问题时，此页面显示为 Google 中的最佳结果之一。我正在重新审视这一点，因为在 jQuery 1.6 及更高版本中，prop() 应用于“已检查”状态，而不是 attr() 传递 true 或 false。更多信息在这里。
For example, Henrick's code should now be:
例如，Henrick 的代码现在应该是：
$(function () {
$('#selectall').toggle(
function() {
$('#friendslist .tf').prop('checked', true);
},
function() {
$('#friendslist .tf').prop('checked', false);
}
);
});
回答by Andreas Niedermair
$('#friendslist .tf')
this selector will suit your needs
此选择器将满足您的需求
回答by Henrik Joreteg
Use the jquery toggle function. Then you can also perform whatever other changes you may want to do along with those changes... such as changing the value of the button to say "check all" or "uncheck all".
使用 jquery 切换功能。然后，您还可以执行您可能想要做的任何其他更改以及这些更改……例如更改按钮的值以说“全部选中”或“全部取消选中”。
$(function () {
$('#selectall').toggle(
function() {
$('#friendslist .tf').attr('checked', 'checked');
},
function() {
$('#friendslist .tf').attr('checked', '');
}
);
});
回答by Onimusha
A very simple check/uncheck all without the need of loop
一个非常简单的检查/取消检查，无需循环
<input type="checkbox" id="checkAll" /> Check / Uncheck All
<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3
And the javascript (jQuery) accounting for "undefined" on checkbox value
以及 javascript (jQuery) 在复选框值上考虑“未定义”
** UPDATE - using .prop()**
**更新 - 使用 .prop()**
$("#checkAll").change(function(){
var status = $(this).is(":checked") ? true : false;
$(".chk").prop("checked",status);
});
** Previous Suggestion - may not work**
**先前的建议 - 可能不起作用**
$("#checkAll").change(function(){
var status = $(this).attr("checked") ? "checked" : false;
$(".chk").attr("checked",status);
});
OR with the suggestion from the next post using .prop() combined into a single line
或者使用 .prop() 将下一篇文章中的建议合并为一行
$("#checkAll").change(function(){
$(".chk").attr("checked",$(this).prop("checked"));
});
回答by TeacupTech
This is how I toggle checkboxes
这就是我切换复选框的方式
$(document).ready(function() {
$('#Togglebutton').click(function() {
$('.checkBoxes').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
回答by Robert Cabri
maybe try this:
也许试试这个：
$(function () {
$('#selectall').click(function () {
$('#friendslist .tf').attr('checked', this.checked);
});
});
回答by user1953637
<div class="control-group">
<input type="checkbox" class="selAllChksInGroup"> All
<input type="checkbox" value="NE"> Nebraska
<input type="checkbox" value="FL"> Florida
</div>
$(document).ready(function(){
$("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function( event ){
$(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked);
});
});
回答by Charlie Benger-Stevenson
I could not get this last example to work for me. The correct way to query the state of the checkbox is apparently :
我无法让最后一个例子对我有用。查询复选框状态的正确方法显然是：
var status = $(this).prop("checked");
and not
并不是
var status = $(this).attr("checked") ? "checked" : false;
as above.
如上。
回答by Adrian Florescu
I created a function that I use on all projects. This is just the initial draft, but maybe it will help:
我创建了一个用于所有项目的函数。这只是初稿，但也许会有所帮助：
Function:
功能：
function selectAll(wrapperAll, wrapperInputs) {
var selectAll = wrapperAll.find('input');
var allInputs = wrapperInputs.find('input');
console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);
function checkitems(allInputs) {
//If all items checked
if (allInputs.filter(':not(:checked)').length === 0) {
console.log('Function: checkItems: All items checked');
selectAll.attr('checked', true);
} else {
console.log('Function: checkItems: Else all items checked');
selectAll.attr('checked', false);
}
}
checkitems(allInputs);
allInputs.on('change', function () {
checkitems(allInputs)
});
selectAll.on('change', function () {
if (this.checked) {
console.log('This checkbox is checked');
wrapperInputs.find(':checkbox').attr('checked', true);
} else {
console.log('This checkbox is NOT checked');
wrapperInputs.find(':checkbox').attr('checked', false);
}
});
}
It accepts the 2 parameters where the inputs are wrapped into and you cand use-it like this:
它接受包含输入的 2 个参数，您可以像这样使用它：
$(function () {
var wrapperAll = $('.selectallinput');
var wrapperInputs = $('.inputs');
selectAll(wrapperAll, wrapperInputs);
});
See demo: http://jsfiddle.net/cHD9z/
回答by Deep Kumar
Here is how I achieved it.
这是我如何实现它。
function SelectAllCheckBoxes();
{
$('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked"));
}
The following fires the above line.
下面会触发上面的行。
<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' />
On the click of chkPrint , every checkbox in the grid divSrchResults' is either checked or unchecked depending on the status of chkPrint.
单击 chkPrint 时，网格 divSrchResults' 中的每个复选框都被选中或取消选中，具体取决于 chkPrint 的状态。
Of course, if you need advanced functions like unchecking the titled checkbox when every other checkbox has been unchecked, you need to write another function for this.
当然，如果您需要高级功能，例如在取消选中所有其他复选框时取消选中标题复选框，则需要为此编写另一个函数。
