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

Question

I have the following HTML in the page body - these are the only input's of type checkbox on this HTML page:

    <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>

I have a SUBMIT button on this HTML page that when clicked by the user runs some javascript that needs to evaluate these checkboxes - so I do the following:

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

so far every time I have checked the array checkboxes indexes 0-7 of checkboxes are N-A1 through N-H8 and indexes 8-15 are S-A1 through S-H8.

Question 1: as long as these remain the only checkbox type on this HTML page and they are always in this order on the page is this order in checkboxes array always guaranteed? (that is will the first 8 always be N-xx and the second 8 always be S-xx?)

Question 2: if a checkbox get's added somewhere else on this HTML page I'm hosed so what would be the best way to get only this set of checkboxes? Put sometype of div with an id around these 2 fieldset's or put some type of id on each of these fieldsets like "north" and "south". Give quick example of how to fetch the checkboxes in this case.

Question 3: what I really want in the end is to send only the checkboxes that are checked to my PHP backend - currently I am using a for loop in javascript on checkboxes to find which boxes are checked in javascript then send those that are checked in the POST to my PHP code. Is there a better way - best way to do this maybe just sent the whole checkboxes array in the POST and process in PHP to find who's checked?

Thanks in advance for ideas/suggestions...

Answer 1

1

Yes, the order is guaranteed.

The specification states

The querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.

meaning the elements will be returned in the order they appear in the document

2

If checkboxes are added, the best way to get those elements would be to keep track of them when inserting.
Other than that, wrapping them in another element with an ID or class would work as well, or just giving the new checkboxes a class

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

3

Generally you'd just submit the form, and the checked boxes will be sent automatically.
If you're sending the data with ajax, you can get the checked boxes with an attribute selector

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