如何收集一个 div 中所有的复选框元素？

Question

我有一个大的div元素，里面包含多个div和input（复选框类型）标签。我想要检查是否所有的复选框都被选中。我尝试使用以下JQuery代码片段引用div内部的所有复选框：

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

但是它并没有获取到所有的复选框。这种情况下可靠的jQuery选择器是什么？在我的页面中，输入元素的位置没有顺序。我的意思是它们可以出现在主要div内的任何位置。

- Nisman

---

99%的问题需要提供一个MCVE（最小化、完整性和可验证性示例）。 - zer00ne

如果 if($('div#mainDiv-checkboxes input[type=checkbox]:checked').length==$('div#mainDiv-checkboxes input[type=checkbox]'))，则表示所有的复选框都已被选中。 - Anupam

你期望的是什么？这部分代码看起来没问题，具体哪里出了问题？ - markoffden

Answer 1

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

如果这两个数字相同，则所有复选框都已被选中。

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

演示

- Pimmol

Answer 2

您可以不使用each()来完成此工作。获取所有checkbox和checked checkbox的数量。如果两个值相等，则表示所有复选框都已选中。

$("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>

- Mohammad

Answer 3

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

示例

JSFiddle。

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

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

注意: array.every不被所有浏览器支持。在使用前请查看浏览器兼容性。

- Rajesh