Javascript 表单 getElementsByTagName("input") 没有在不同的 div 中获取所有输入

Question

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

<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.elements 去老学校，要么使用 querySelectorAll

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