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

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

7 个答案: