如何在 Vanilla JS 中创建一个函数，将选中的属性放在所选输入之前的无线电输入中？

Question

我找不到这个问题的解决方案。

需要对 JavaScript 所选输入之前的输入和未选中之后的输入进行属性检查。

UPD：将输入类型更改为 "checkbox"，现在我需要一个函数来标记 "checked" 最后选中的复选框之前的复选框，同时取消选中后续的复选框以防它们之前被选中。

注意：解决方案必须使用兼容 ES5 的语法。

请附上代码示例！

<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">

Answer 1

<input type="radio"> 的默认行为是只允许 select 编辑其中一个输入/选项。因此，只有最后一个输入被标记为您的 JS 代码。要能够 select 多个选项，请使用 <input type="checkbox">。更多参考：MDN Docs.

Answer 2

那么，朋友，可以这么简单：

// checkbox elements
var boxes = document.getElementsByName('toggle');

// function to bind to each of the input tags' change event
function markPreceding() {

  // retrieve the value from the clicked input
  var curIndex = this.value;

  // iterate through every single checkbox named toggle
  for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
    // if data-index is lower or equal to curIndex, then true; else, false
    box.checked = box.value <= curIndex;
  }

}

// add function to the onchange handler of each input
for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
  box.onchange = markPreceding;
}

<input type="checkbox" id="product-1" name="toggle" value="1">
<input type="checkbox" id="product-2" name="toggle" value="2">
<input type="checkbox" id="product-3" name="toggle" value="3">
<input type="checkbox" id="product-4" name="toggle" value="4">
<input type="checkbox" id="product-5" name="toggle" value="5">

备注

~~我使用 data attributes 存储了每个复选框的索引。~~

例如，

~~我可以使用value属性。我更喜欢使用数据属性，因为您可能想将 value 用于其他用途。由您决定。~~（见post底部）

我们可以使用 .dataset.index 从 JavaScript 中的 HTML 视图检索每个属性 data-index。它可以是任何其他名称而不是 "index"。请记住，如果您使用多个单词，例如 HTML 中的 data-my-custom-prop，您必须在 JS 中将其称为 .dataset.myCustomProp（它们采用驼峰式命名）。

.checked 属性无论如何都存储一个布尔值，因此您可以传递比较 box.dataset.index <= curIndex ，它将评估为 true 或 false，恭敬地选中或取消选中该框。

编辑： 由于您在评论中提出了问题，我尝试将其转换为 ES5 兼容语法。我停止使用数据属性，一方面，我使用 this 关键字而不是 event.target 检索输入值（也许我不需要更改它，但我得到的印象是更多过去很常见）。

如何在 Vanilla JS 中创建一个函数，将选中的属性放在所选输入之前的无线电输入中？

How to make a function in Vanilla JS that puts checked attribute to the radio inputs before the selected input?

javascript

arrays

checkbox

ecmascript-5

preventdefault

备注