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而第二个8总是S-xx？）

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

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

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

Answer 1

1

是的，订单有保证。

specification州

Document，DocumentFragment和的querySelectorAll()方法元素接口必须返回包含所有内容的NodeList 匹配上下文节点子树中的元素节点， in 文件订单。如果没有匹配的节点，则该方法必须返回一个空的NodeList。

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

2

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

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

3

一般情况下，您只需提交表格，复选框将自动发送如果您使用ajax发送数据，则可以使用属性选择器

获取复选框

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

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

1 个答案:

1

2

3