Javascript 如何检查是否所有复选框都未选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14800954/
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
How to check if all checkboxes are unchecked
提问by user2014429
I am trying to make a function to check if all checkboxes are unchecked. I have a similar function for text boxes. As I have not worked with checkboxes much before, I'm not sure how to adapt it except for changing input[type=text]to input[type=checkbox].
我正在尝试创建一个函数来检查是否所有复选框都未选中。我有一个类似的文本框功能。由于我以前很少使用复选框，因此除了更改input[type=text]为input[type=checkbox].
Can anyone help me out? Thanks.
谁能帮我吗？谢谢。
var textinputs = document.querySelectorAll('input[type=text]');
var empty = [].filter.call( textinputs, function( el ) {
return !el.value
});
if (textinputs.length == empty.length) {
alert("None filled");
return false;
}
回答by endyourif
The following should do the trick:
以下应该可以解决问题：
var textinputs = document.querySelectorAll('input[type=checkbox]');
var empty = [].filter.call( textinputs, function( el ) {
return !el.checked
});
if (textinputs.length == empty.length) {
alert("None filled");
return false;
}
回答by David says reinstate Monica
You can simplify a little, given that you're able to use querySelectorAll():
鉴于您可以使用，您可以稍微简化一下querySelectorAll()：
var checked = document.querySelectorAll('input:checked');
if (checked.length === 0) {
// there are no checked checkboxes
console.log('no checkboxes checked');
} else {
// there are some checked checkboxes
console.log(checked.length + ' checkboxes checked');
}
JS Fiddle (with no checkboxes checked).
JS Fiddle (with some checkboxes checked).
Or, if all you want is a Boolean value to indicate whether any checkbox is checked, for use in a function:
或者，如果您只需要一个布尔值来指示是否选中了任何复选框，以在函数中使用：
var isChecked = document.querySelectorAll('input:checked').length === 0 ? false : true;
return isChecked;
You could, of course, avoid creating a variable and simply return the result of the ternary; I only used the variable to try and make it clear what, precisely, I was returning/testing-for.
当然，您可以避免创建一个变量而简单地返回三元的结果；我只使用变量来尝试明确我正在返回/测试的内容。
Reference:
参考：
回答by Zlitus
Here, a short and very simple example (Vanilla Javascript):
这里有一个简短且非常简单的示例（Vanilla Javascript）：
if (document.querySelectorAll('input[type="checkbox"]:checked').length === document.querySelectorAll('input[type="checkbox"]').length) {
console.log('All checkboxes are checked');
} else {
console.log('Some checkboxes are not checked');
}
Here in jQuery syntax:
在 jQuery 语法中：
if ($('input[type="checkbox"]:checked').length === $('input[type="checkbox"]').length) {
console.log('All checkboxes are checked');
} else {
console.log('Some checkboxes are not checked');
}
Another way to do it, with the :not() pseudo-selector:
另一种方法，使用:not() 伪选择器：
if (document.querySelectorAll('input[type="checkbox"]:not(:checked)').length) {
console.log('Some checkbox are not checked');
}
回答by Nicoleta Andreea Soare
Pseudo class input[type="checkbox"]:not(":checked") should work perfectly in jquery:
伪类 input[type="checkbox"]:not(":checked") 在 jquery 中应该可以完美运行：
var checkboxes = { id:"hello", value:"value", checked:"false" }
$('.post-text').append('<div id="wrappingcheckboxes"></div>'); for (var i = 0; i<= 10; i ++){ $('#wrappingcheckboxes').append("<input type='checkbox' value='"+checkboxes.value + i + "' id='"+checkboxes.id + i+"'/>");}
$('#wrappingcheckboxes input[type="checkbox"]:not(":checked")')
回答by Kurkula
I would recommend name spacing with class or id
我建议使用 class 或 id 的名称间距
var checked = document.querySelectorAll('input.myClassName:checked');
//or
var checked = document.querySelectorAll('input#myIdName:checked');
if (checked.length === 0) {
console.log('no checkboxes checked');
} else {
console.log(checked.length + ' checkboxes checked');
}
回答by Saad Hasan
This works for me, Give all your checkboxes one class name then:
这对我有用，给你所有的复选框一个类名然后：
if ($('.ClassName:checked').length == 0) {
// do your job
}
回答by Jeff Beagley
Here is how to iterate over multiple input fields and grab each checked one. I generally use this to add selected elements to their own array
以下是如何遍历多个输入字段并获取每个选中的字段。我通常使用它来将选定的元素添加到它们自己的数组中
let els = document.querySelectorAll("input[type=checkbox]");
els.forEach((v) => {
if(v.checked) {
//checked
}
});
If you don't want to iterate over every checkbox, you can iterate over just the selected ones by changing the query selector from input[type=checkbox]to input[type=checkbox]:checked
如果你不希望每次复选框迭代，你可以通过改变查询选择只是选择的迭代input[type=checkbox]来input[type=checkbox]:checked
