Javascript形式的getElementsByTagName（“ input”）未在不同的div中获得所有输入

Question

我想使用输入复选框来创建批量操作表单。我有一个html表，其中包含从数据库中获取的记录。我正在使用jtable重建html表。表格位于表格标题中，带有用于切换所有其他复选框的单数输入复选框。其余的输入复选框位于表格主体内部的单独div中，这些表格具有form标记。

<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]);
        }
    }

[单击表头中的toggleCheckBoxes以调用toggleAllCheckBoxes（this）和console.log（this.form）时，控制台将显示来自表单的所有输入，包括来自tbody的输入。我使用form.getElementsByTagName（“ input”）从表单内部获取所有输入，但它仅返回toggleCheckBoxes输入。 getElementsByTagName不适用于单独的div中的元素吗？我结束了将类名添加到复选框输入并使用document.getElementsByClassName。

Answer 1

因为选择器在form元素内部，所以这些元素不在form元素中。您可以使用form.elements去上学，也可以使用querySelectorAll

form.elements