JQuery 调用 .elements 返回未定义

Question

我正在尝试使用 jQuery 遍历一组复选框。复选框是用 HTML 编写的，如下所示：

<div id="checkboxes">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" name="XXX" class="custom-control-input" id="a" value="XXX">
        <label class="custom-control-label" for="a">XXX</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" name="XXX" class="custom-control-input" id="b" value="XXX">
        <label class="custom-control-label" for="b">XXX</label>
    </div>
    ...</div>

我试图用这个（对按钮单击的响应的一部分）获取 JQuery 中的复选框数组：

var choices = document.getElementById("checkboxes").elements;

但是，当我调用 时for(let i = 0; i < choices.length; i++)，控制台中出现错误：

Uncaught TypeError: Cannot read property 'length' of undefined

显然，该变量choices未定义。我已经做了一些研究，但我找不到问题出在哪里，或者我可以通过其他方式获取复选框元素的数组。

Answer 1

用于querySelectorAll()定位特定的元素集合var choices = document.querySelectorAll('#checkboxes input[type="checkbox"]');choices.forEach( el => console.log(el.id, el.value) )<div id="checkboxes">&nbsp; &nbsp; <div class="custom-control custom-checkbox">&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="XXX" class="custom-control-input" id="a" value="XXX">&nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="a">XXX</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="custom-control custom-checkbox">&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="XXX" class="custom-control-input" id="b" value="XXX">&nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="b">XXX</label>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;</div>