如何使用 ES6 从表单中选择所有无线电组？ [复制]

Question

我想使用name 属性从表单中选择所有单选组：

<form action="#" id="my-form">

   <input type="radio" name="question1" value="1" />
   <input type="radio" name="question1" value="2" />

   <input type="radio" name="question2" value="1" />
   <input type="radio" name="question2" value="2" />

   <input type="radio" name="question3" value="1" />
   <input type="radio" name="question3" value="2" />

</form>

如您所见，我有 3 个广播组：问题 1、问题 2、问题 3

所以，从 JavaScript（不是 jquery），我想创建一个包含这些组名称的数组：["question1", "question2", "question3"] 或至少选择每个组的第一个输入

我尝试使用：

document.querySelectorAll("input[name]");

但这会返回所有输入，现在我不知道如何制作过滤器以仅保留每个组的一个输入，您能帮帮我吗？

Answer 1

inps = document.querySelectorAll("input[name]")
unique = [];
for(var i=0; i< inps.length; i++){
    if(!i || inps[i-1].getAttribute("name")!=inps[i].getAttribute("name"))
        unique.push(inps[i])
}
console.log(unique)

这将为您提供一个具有唯一名称的元素数组。将从每个名称中选择具有该名称的第一个元素。

它是如何工作的

1. 循环遍历元素
2. 如果当前元素是第一个元素（第一个条件），或者当前元素的名称与最后一个元素不匹配（第二个条件），则将当前元素添加到最终列表中。

Answer 2

您可以像这样在查询选择器中指定问题

const radios = document.querySelectorAll('input[name="question2"]')

console.log(radios);

<form action="#" id="my-form">

   <input type="radio" name="question1" value="1" />
   <input type="radio" name="question1" value="2" />

   <input type="radio" name="question2" value="1" />
   <input type="radio" name="question2" value="2" />

   <input type="radio" name="question3" value="1" />
   <input type="radio" name="question3" value="2" />

</form>

Answer 3

您可以在此处放置多个选择器，例如：第一个选择单选框，另一个选择您选择的值或任何特定数据属性，以对单选框进行分组，如代码 sn-p

const allRadio = document.querySelectorAll('[type="radio"][value="1"]');
console.log('count of the selected elems is', allRadio);

<form action="#" id="my-form">

   <input type="radio" name="question1" value="1" />
   <input type="radio" name="question1" value="2" />

   <input type="radio" name="question2" value="1" />
   <input type="radio" name="question2" value="2" />

   <input type="radio" name="question3" value="1" />
   <input type="radio" name="question3" value="2" />

</form>