Javascript 如何检查是否所有复选框都未选中

我试图创建一个函数来检查是否所有复选框都未选中。我有一个类似的文本框功能。由于我以前很少使用复选框，我不知道如何调整它，除了将

input[type=text]

更改为

input[type=checkbox]

有人能帮我吗？谢谢

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;
}

---

下面应该可以做到这一点：

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;
}

---

考虑到您能够使用

queryselectoral（）

，您可以稍微简化一下：

或者，如果您只需要一个布尔值来指示是否选中了任何复选框，以便在函数中使用：

var isChecked = document.querySelectorAll('input:checked').length === 0 ? false : true;
return isChecked;

当然，您可以避免创建变量，只返回三元函数的结果；我只是用这个变量试图弄清楚我返回/测试的确切目的

参考：

---

我建议使用类或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');
}

这对我有用， 为所有复选框指定一个类名，然后：

        if ($('.ClassName:checked').length == 0) {
            // do your job
        }

---

下面是一个简短且非常简单的示例（香草Javascript）：

以下是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');
}

另一种方法是：

---

下面是如何迭代多个输入字段并获取每个选中字段。我通常使用它将所选元素添加到它们自己的数组中

let els = document.querySelectorAll("input[type=checkbox]");

els.forEach((v) => {
    if(v.checked) {
        //checked

    }

});

如果不想迭代每个复选框，可以通过将查询选择器从

input[type=checkbox]

更改为

input[type=checkbox]：checked来迭代所选复选框：checked

伪类输入[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")')

var复选框={id:“hello”，value:“value”，checked:“false”}
$（'.post text'）。追加（''）；对于（var i=0；我同意。效果很好。没有意识到会有这么小的不同文档。querySelectorAll（“#divWeeklyDays input[type='checkbox']：checked”）；这也可以使用jQuery。而不是
document.querySelectorAll
，
$（'.get\u一些类'））
works too我不知道你能做document.queryselectoral（'input:checked'）这很有用，谢谢！以前我使用document.queryselectoral（'input[type=“checkbox”][checked]”），但它没有返回正确的结果。@user280109:那是因为
[checked]
匹配该属性，当元素未选中/选中时，该属性不会更新；而
：checked
匹配已选中的属性（显然，选中时）。
if (document.querySelectorAll('input[type="checkbox"]:not(:checked)').length) {
    console.log('Some checkbox are not checked');
}

let els = document.querySelectorAll("input[type=checkbox]");

els.forEach((v) => {
    if(v.checked) {
        //checked

    }

});

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")')