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

Question

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

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

当单击 table header 中的 toggleCheckBoxes 调用 toggleAllCheckBoxes(this) 和 console.log(this.form) 时，控制台会显示来自表单的所有输入，包括来自 tbody 的输入。我使用 form.getElementsByTagName("input") 从内部表单获取所有输入，但它仅 returns toggleCheckBoxes 输入。 getElementsByTagName 不适用于单独 div 中的元素吗？我结束了向复选框输入添加 class 名称并使用 document.getElementsByClassName.

Answer 1

因为选择器在表单元素内部查找，所以元素不在表单元素中。您要么使用 form.elements 老派，要么使用 querySelectorAll

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

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

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

javascript

forms

checkbox

input

getelementsbytagname