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

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