Javascript form getElementsByTagName("input") is not getting all input in different divs

Question

I want to create a bulk action form using input check boxes. I have a html table that contains records fetched from database. I am using jtable to reconstruct the html table. The form is in the table header with a singular input check box for toggling all the other check boxes in. The rest of the inputs check boxes are in separate divs inside the table body, which have form tag.

<thead class="thead">
    <tr>
        <th>
            <form id="bulkDelete" name="bulkDelete"
                  action=""
                  method="post">
                <input form="bulkDelete" type="checkbox" name="toggleCheckBoxes" id="toggleCheckBoxes" onclick="toggleAllCheckBoxes(this);">
            </form>
        </th>
    </tr>       
----------
 <tbody>
        @foreach($tracks as $i => $track)
            <tr>
                <td>
                    <input form="bulkDelete" type="checkbox" name="deleteTrack-{!! $track->id !!}">
                </td>
----------
 function toggleAllCheckBoxes(toggleAllCheckBox) {
        var form = toggleAllCheckBox.form;
        var checkAllCheckBox = toggleAllCheckBox.checked;
        console.log(checkAllCheckBox);
        console.log(form);  //shows all inputs
        var checkboxes = form.getElementsByTagName("input");
        console.log(checkboxes); //only has 1 input
        for(var i = 0; i < checkboxes.length; i++) {
            console.log(checkboxes[i]);
        }
    }

When clicking the toggleCheckBoxes in the table header to call toggleAllCheckBoxes(this) and console.log(this.form) the console display all inputs from the form, including the inputs from the tbody. I use form.getElementsByTagName("input") to get all the inputs from inside form but it only returns the toggleCheckBoxes input. Does getElementsByTagName not work on elements that are in separate divs? I ended adding a class name to the check box inputs and using document.getElementsByClassName.

Answer 1

Because the selector is looking inside the form element, the elements are not in the form element. You either go old school with form.elements or use querySelectorAll

var inputs = document.querySelectorAll('input[form="bulkDelete"]')