如何检查是否取消选中所有复选框

Question

我正在尝试创建一个函数来检查是否所有复选框都未选中。我有一个类似的文本框功能。由于我之前没有使用过复选框，我不知道除了将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;
}

Answer 1

以下应该做的伎俩：

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

Answer 2

鉴于您可以使用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)。

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

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

Proof-of-concept demo。

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

参考：

• :checked pseudo-class。

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

Answer 4

这里有一个简短而简单的例子（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() pseudo-selector的另一种方法：

if (document.querySelectorAll('input[type="checkbox"]:not(:checked)').length) {
    console.log('Some checkbox are not checked');
}

Answer 5

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

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

Answer 6

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

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

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

    }

});

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

Answer 7

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

using this page's console