get array of checkboxes checked, and only if seletced in a specific order, then go to URL

First time asking here. I tried a number of topics for this, and I currently use a code for checkboxes, but it's for gathering into a mailform and sending to me via php. I can't seem to find exactly what I need for the following scenario.

I am reworking some Flash puzzles to be all html and javascript (or jquery). One puzzle requires the player to enter a code (to open a safe). In Flash they clicked buttons with code symbols on them, so I thought, Checkboxes displayed as images could work...

1. I have 9 checkboxes. Each has a value from 1 to 9. In the layout they are mixed up (they are not positioned on the page in sequential order) and I use images to represent the checkboxes.

2. I want to find out if all the boxes are selected, and if they are selected in the exact order of 1-9.

3. If the checkboxes are checked in the correct order according to their value (1,2,3,4,5,6,7,8,9) then on clicking the Submit button, the player is taken to the next webpage.

I can also do this with names or Ids, whatever works. Or php. I was hoping to keep it simple, because I am not savvy with the javvy. I probably know enough to be dangerous to myself and others :)

Thanks in advance for any help, or links to a topic that could point me in the right direction.

Here's my html code.

    <form name="checklist" method="post" action="My-Page.php">
      <label>
        <input type="checkbox" value="8">
        <img src="btn_8.png"></label>
      <label>
        <input type="checkbox" value="3">
        <img src="btn_3.png"></label>
      <label>
        <input type="checkbox" value="9">
        <img src="btn_9.png"></label>
      <label>
        <input type="checkbox" value="2">
        <img src="btn_2.png"></label>
      <label>
        <input type="checkbox" value="5">
        <img src="btn_5.png"></label>
      <label>
        <input type="checkbox" value="4">
        <img src="btn_4.png"></label>
      <label>
        <input type="checkbox" value="7">
        <img src="btn_7.png"></label>
      <label>
        <input type="checkbox" value="1">
        <img src="btn_1.png"></label>
      <label>
        <input type="checkbox" value="6">
        <img src="btn_6.png"></label>
      <input type="submit" value="Open">
    </form>

Here's the js I found that gets the values, but I don't know how to make it get the values in that specific order, and then go to a URL, or alert the user to an error (I have an error script, but it's in jquery, and part of a much larger script I have which is for emailing me a list of things).

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

the error snipit:

jQuery("#ValidCheckbox").validate({
expression: "if (isChecked(SelfID)) return true; else return false;",
message: "Select at least one item " });