选中复选框数组，并且仅当按特定顺序选中时，然后转到 URL

Question

第一次在这里问。我为此尝试了很多主题，我目前使用复选框代码，但它用于收集到邮件表单并通过 php 发送给我。对于以下场景，我似乎找不到我需要的确切内容。

我正在修改一些 Flash 谜题，使其全部为 html 和 javascript（或 jquery）。一个谜题要求玩家输入密码（打开保险箱）。在 Flash 中，他们单击带有代码符号的按钮，所以我认为，显示为图像的复选框可以工作...

我有 9 个复选框。每个都有一个从 1 到 9 的值。在布局中它们混合在一起（它们没有按顺序放置在页面上）并且我使用图像来表示复选框。
我想知道是否所有的框都被选中，是否按照1-9的顺序被选中
如果根据复选框的值 (1,2,3,4,5,6,7,8,9) 以正确的顺序选中复选框，则在单击提交按钮时，玩家被带到下一个网页。

我也可以使用名称或 ID 执行此操作，只要可行即可。或者 php。我希望保持简单，因为我不了解 javvy。我可能知道的足以对自己和他人造成危险:)

在此先感谢您提供的任何帮助，或指向可以为我指明正确方向的主题的链接。

这是我的 html 代码。

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

这是我发现的获取值的 js，但我不知道如何让它按特定顺序获取值，然后转到 URL，或提醒用户注意错误。

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

更新。我为此苦苦挣扎，最后请了一位朋友帮忙。我花了 8 天的时间，他只用了大约 1 小时，从头开始。
非常感谢那些花时间给我一些提示的人，这个网站非常适合学习。

Answer 1

这是 JavaScript 中的一种方法。您维护一个 selected 数组，您可以在单击复选框时添加或删除项目。然后，当表单被提交时，你会做一些检查：首先你会看到是否所有的框都被选中了。接下来，您查看 selected 数组中的所有数字是否按顺序排列。

const form = document.querySelector("#form");
let selected = [];
const numberOfCheckboxes = document.querySelectorAll("#form input").length;

form.addEventListener("click", function(e) {
  if (e.target.nodeName !== "INPUT") return;
  if (e.target.checked) {
    selected.push(parseInt(e.target.value));
  } else {
    selected = selected.filter(el => el != e.target.value);
  }
})

function check(e) {
  console.log(selected);
  if (selected.length !== numberOfCheckboxes) {
    e.preventDefault();
    alert("You didn't select all the boxes");
  }
  const inOrder = selected.every((el, i, arr) => i === 0 || el === arr[i-1] + 1);
  if (!inOrder) {
    e.preventDefault();
    alert("Wrong order!");
  }
}

<form id="form" onsubmit="return check(event)">
  <label>
    <input type="checkbox" value="1" /> 1
  </label>
  <label>
    <input type="checkbox" value="2" /> 2
  </label>
  <label>
    <input type="checkbox" value="3" /> 3
  </label>
  <button>submit</button>
</form>

Answer 2

因为你没有分享代码，我不会帮你修复它。我可以给你一些提示，你可以尝试实现它。

在每个复选框选择上调用 onClick 函数。
创建一个 array 并将所选复选框的值推入其中。
```
// example: checkedArr = [1,2,3,4];
```
使用另一个数组维护值的最终顺序
```
// expectedArr = [1,2,3,4];
```

深入比较这 2 个数组，并根据它们的结果，继续您的业务逻辑。比较两个数组及其顺序

var is_same_arr = (checkedArr.length == expectedArr.length) && checkedArr.every(function(element, index) {
      return element === expectedArr[index]; 
});

选中复选框数组，并且仅当按特定顺序选中时，然后转到 URL

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

html

javascript

arrays

checkbox