是否保证生成的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页面上有一个“提交”按钮，当用户单击该按钮时，它会运行一些需要评估这些复选框的javascript-因此，我将执行以下操作：

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

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

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

问题2：如果我在此HTML页面的其他位置添加了一个复选框，那么我将只获得这组复选框的最佳方法是什么？在这两个字段集周围放置一个带有id的div类型，或者在每个字段集上都添加一些类型的id，例如“ north”和“ south”。快速举例说明在这种情况下如何获取复选框。

问题3：最后，我真正想要的是仅将选中的复选框发送到我的PHP后端-当前，我在复选框上的javascript中使用了for循环来查找在javascript中选中了哪些复选框，然后将选中的复选框发送给POST到我的PHP代码。有没有更好的方法-最好的方法可能只是在POST中发送了整个复选框数组，然后在PHP中进行处理以查找被检查的对象？

预先感谢您的想法/建议...

Answer 1

1个

是的，订单得到保证。

该规范状态

在querySelectorAll()对文档，的DocumentFragment，和Element接口的方法必须返回一个包含所有的匹配元素的上下文节点的子树内的节点的NodeList，文档顺序。如果没有匹配的节点，则该方法必须返回一个空的NodeList。

表示元素将按照它们在文档中出现的顺序返回

2

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

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

3

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

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