Question

我有一个很大的div元素，里面有多个div和input（checkbox类型）标签。我想检查是否选中了所有复选框。我尝试使用以下JQuery代码段来引用div中的所有复选框：

$('div#mainDiv-checkboxes input[type=checkbox]').each(function(){
    //my logic
});

但它没有获得所有复选框。对于这种情况，可靠的jquery选择器是什么？我的页面中没有输入元素位置的顺序。我的意思是主要div内部可以有任何地方。

Answer 1

获取所有复选框的编号。获取已选中复选框的数量。

如果数字相同，则检查所有数字。

var container = document.querySelector('#mainDiv-checkboxes');
var checkboxesAll = container.querySelectorAll('input[type="checkbox"]');
var checkBoxesSelected = container.querySelectorAll('input[type="checkbox"]:checked');

<强> DEMO

Answer 2

您可以在没有each()的情况下完成这项工作。统计所有checkbox和checked复选框。如果两个值都相等，则表示选中了所有复选框。

$("button").click(function(){    
    var all = $("div :checkbox").length;
    var checked = $("div :checkbox:checked").length;
    
    if (all == checked)
        console.log("All checkbox is checked!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Test</button>
<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

Answer 3

您也可以使用querySelectors获取元素并尝试Array.every进行验证。

示例

JSFiddle

＆＃13;

function validate() {
  var chks = document.querySelectorAll("#content input[type='checkbox']");
  var result = Array.prototype.every.call(chks, function(c) {
    return c.checked;
  });
  console.log(result);
}

＆＃13;

<div id="content">
  <input type="checkbox" />a
  <input type="checkbox" />b
  <input type="checkbox" />c
  <input type="checkbox" />d
</div>

<button onclick="validate()">Test</button>

＆＃13;

注意：每个浏览器都不支持array.every。使用前请检查browser compatibility。

如何收集div内的所有复选框元素？

3 个答案:

示例