document.querySelectorAll("input[type=checkbox")的结果数组的顺序有保证吗？

Question

页面正文中有以下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页面上有一个SUBMIT按钮，当用户单击该按钮时，会运行一些需要评估这些复选框的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，第2 8永远是S？)

问题2:如果在这个HTML页面上添加了一个复选框get，那么只获得这组复选框的最好方法是什么？在这两个字段集周围放置带有id的div类型，或者在每个字段集上放置某种类型的id，如"north“和"south”。给出如何在本例中获取复选框的快速示例。

问题3:我真正想要的是只将选中的复选框发送到我的PHP后端--目前，我正在使用javascript上的for循环来查找哪些复选框在javascript中选中，然后将在POST中选中的复选框发送到我的PHP代码中。是否有更好的方法--最好的方法--也许只是在POST中发送了整个复选框数组，然后在PHP中发送进程来查找被选中的人？

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

Answer 1

1

是的，订单是有保证的。

规格说明态

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

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

2

如果添加了复选框，获得这些元素的最佳方法是在插入时跟踪它们。

除此之外，用ID或类将它们封装在另一个元素中也可以，或者只是给新的复选框一个类。

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

3.

通常，您只需提交表单，复选框就会自动发送。

如果使用ajax发送数据，则可以使用属性选择器获取复选框

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