时间戳

首页 > 解决方案 > 获取选中的复选框数组，并且仅当以特定顺序选择时，然后转到 URL

javascript - 获取选中的复选框数组，并且仅当以特定顺序选择时，然后转到 URL

问题描述

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

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

  1. 我有 9 个复选框。每个都有一个从 1 到 9 的值。在布局中它们混合在一起（它们没有按顺序放置在页面上），我使用图像来表示复选框。

  2. 我想知道是否所有的框都被选中，以及它们是否按照 1-9 的确切顺序被选中。

  3. 如果复选框根据其值（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)
}

标签： javascripthtmlarrayscheckbox

解决方案

这是在 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>

推荐阅读