是否保证 document.querySelectorAll(“input[type=checkbox”） 的结果数组的

Is order of resulting array of document.querySelectorAll("input[type=checkbox") guaranteed?

本文关键字：checkbox 结果 type 数组 document querySelectorAll input 是否      更新时间：2023-09-26

我在页面正文中有以下HTML - 这些是此 HTML 页面上唯一的输入类型复选框：

    <fieldset>
        <legend>North Face</legend>
        N-A1:
        <input type="checkbox" name="NorthFace" value="N-A1" id="NA1">
        N-B2:
        <input type="checkbox" name="NorthFace" value="N-B2" id="NB2">
        N-C3:
        <input type="checkbox" name="NorthFace" value="N-C3" id="NC3">
        N-D4:
        <input type="checkbox" name="NorthFace" value="N-D4" id="ND4">
        N-E5:
        <input type="checkbox" name="NorthFace" value="N-E5" id="NE5">
        N-F6:
        <input type="checkbox" name="NorthFace" value="N-F6" id="NF6">
        N-G7:
        <input type="checkbox" name="NorthFace" value="N-G7" id="NG7">
        N-H8:
        <input type="checkbox" name="NorthFace" value="N-H8" id="NH8">
    </fieldset>
     <br />
    <fieldset>
        <legend>South Face</legend>
        S-A1:
        <input type="checkbox" name="SouthFace" value="S-A1" id="SA1">
        S-B2:
        <input type="checkbox" name="SouthFace" value="S-B2" id="SB2">
        S-C3:
        <input type="checkbox" name="SouthFace" value="S-C3" id="SC3">
        S-D4:
        <input type="checkbox" name="SouthFace" value="S-D4" id="SD4">
        S-E5:
        <input type="checkbox" name="SouthFace" value="S-E5" id="SE5">
        S-F6:
        <input type="checkbox" name="SouthFace" value="S-F6" id="SF6">
        S-G7:
        <input type="checkbox" name="SouthFace" value="S-G7" id="SG7">
        S-H8:
        <input type="checkbox" name="SouthFace" value="S-H8" id="SH8">
    </fieldset>

我在这个HTML页面上有一个提交按钮，当用户点击它时，它会运行一些需要评估这些复选框的javascript - 所以我执行以下操作：

var checkboxes = document.querySelectorAll("input[type=checkbox");

到目前为止，每次我选中数组复选框索引 0-7 的复选框是 N-A1 到 N-H8，索引 8-15 是 S-A1 到 S-H8。

问题 1：只要这些仍然是此 HTML 页面上唯一的复选框类型，并且它们在页面上始终按此顺序排列，复选框数组中的此顺序是否始终得到保证？（也就是说，前 8 个总是 N-xx，后 8 个总是 S-xx 吗？

问题2：如果在此HTML页面上的其他地方添加了复选框，那么仅获取这组复选框的最佳方法是什么？在这两个字段集周围放置某种带有 id 的div，或者在这些字段集中放置某种类型的 id，如"北"和"南"。举例说明在这种情况下如何获取复选框。

问题 3：我最终真正想要的是只将选中的复选框发送到我的 PHP 后端 - 目前我在复选框上使用 javascript 中的 for 循环来查找在 javascript 中选中的框，然后将那些在 POST 中选中的框发送到我的 PHP 代码。有没有更好的方法 - 最好的方法可能只是在 POST 中发送整个复选框数组并在 PHP 中处理以查找选中的人？

提前感谢您的想法/建议...

1

是

的，订单是有保证的。

规范状态

文档

、文档片段和querySelectorAll() 元素接口必须返回一个包含所有 匹配上下文节点子树中的元素节点，在 文档顺序。如果没有匹配的节点，该方法必须返回 一个空的节点列表。

这意味着元素将按照它们在文档中出现的顺序返回

阿拉伯数字

如果添加了复选框，则获取这些元素的最佳方法是在插入时跟踪它们。
除此之外，将它们包装在另一个带有 ID 或类的元素中也可以，或者只是给新复选框一个类

var new_boxes = document.querySelectorAll('.new_boxes');

3

通常，您只需提交表单，复选框将自动发送。
如果使用 ajax 发送数据，则可以使用属性选择器获取复选框

var boxes = document.querySelector('input[type="checkbox"][checked]');
相关文章：