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

【问题标题】：How to collect all checkbox elements inside of a div?如何收集 div 内的所有复选框元素？
【发布时间】：2016-05-31 12:31:50
【问题描述】：

我有一个大的 div 元素，里面有多个 div 和输入（复选框类型）标签。我想检查是否选中了所有复选框。我尝试使用以下 JQuery sn-p 来引用 div 内的所有复选框：

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

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

【问题讨论】：

99% 的问题都需要MCVE (Minimal, Complete, and Verifiable Example)。
if($('div#mainDiv-checkboxes input[type=checkbox]:checked').length==$('div#mainDiv-checkboxes input[type=checkbox]')) 表示全部检查
究竟是什么不符合您的预期？看起来你的这部分代码很好......

标签： javascript jquery checkbox

【解决方案1】：

获取所有复选框的数量。获取选中个复选框的数量。

如果数字相同，则全部检查。

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

DEMO

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 并非所有浏览器都支持。使用前检查browser compatibility。

【讨论】：