29

我正在尝试创建一个功能来检查是否所有复选框都未选中。我对文本框有类似的功能。由于我以前没有过多使用复选框，因此我不确定如何调整它，除非更改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;
}
4

7 回答 7

36

以下应该可以解决问题：

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;
}
于 2013-02-10T18:35:05.620 回答
26

你可以简化一点，因为你可以使用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（没有选中复选框）。

JS Fiddle（选中了一些复选框）。

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

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

概念验证演示。

当然，您可以避免创建变量并简单地返回三元的结果；我只是使用该变量来尝试明确我正在返回/测试的内容。

参考：

于 2013-02-10T18:44:17.977 回答
5

在这里，一个简短且非常简单的示例（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');
}

在 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');
}

另一种方法是使用:not() 伪选择器：

if (document.querySelectorAll('input[type="checkbox"]:not(:checked)').length) {
    console.log('Some checkbox are not checked');
}
于 2018-08-30T09:25:09.367 回答
3

我建议使用 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');
}
于 2017-12-13T21:53:29.703 回答
2

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

使用此页面的控制台

于 2019-01-18T09:21:21.693 回答
0

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

        if ($('.ClassName:checked').length == 0) {
            // do your job
        }
于 2018-02-07T16:00:48.067 回答
0

以下是如何遍历多个输入字段并获取每个选中的字段。我通常使用它来将选定的元素添加到自己的数组中

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

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

    }

});

如果您不想遍历每个复选框，则可以通过将查询选择器从更改为来仅遍历选定的input[type=checkbox]复选框input[type=checkbox]:checked

于 2018-09-10T17:33:53.780 回答