Javascript document.querySelectorAll（“input[type=checkbox”）的结果数组的顺序是否得到保证？

我在页面正文中有以下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>

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

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

问题2：如果在这个HTML页面的其他地方添加了一个复选框get，那么什么是只获取这组复选框的最佳方式呢？在这两个字段集的周围放置一些带有id的div类型，或者在每个字段集上放置一些id类型，如“北”和“南”.给出如何在这种情况下获取复选框的快速示例

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

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

1 是的，订单是有保证的

美国

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

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

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

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

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

var boxes = document.querySelector('input[type="checkbox"][checked]');

---

你可以简单地给一组复选框分配一个唯一的类。用这种方法选择它们要容易得多。@MinusFour-谢谢你的建议-我想这就是我要为北集合和南集合上面的每一组复选框做的事情。与MinusFour建议的在复选框上指定一个类不同，你可以将所有的复选框都包含在一个div中，例如例如

然后你将

查询选择全部（“#face options input[type=checkbox]”

只获取该分区中的复选框。@StephenP-我喜欢你的想法：我想我最终想要的是

和

，然后我应该能够做

查询选择全部（#north face input[type=checkbox][checkbox]）

仅获取选中的north face复选框。感谢您的想法！上面的1非常完美，这正是我想要的！也感谢2和3，它们非常有用。3.正是我想用来发布到我的PHP的内容-谢谢！

var boxes = document.querySelector('input[type="checkbox"][checked]');