JQuery calling .elements returns undefined

I'm trying to loop through a group of checkboxes using jQuery. The checkboxes are written in HTML as such:

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

I attempt to get an array of the checkboxes in JQuery with this (part of a response to a button click):

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

However, when I call for(let i = 0; i < choices.length; i++), I get an error in the console:

Uncaught TypeError: Cannot read property 'length' of undefined

Apparently, the variable choices is undefined. I've done some research, but I can't find where the problem is or another way I can get an array of the checkbox elements.