如何 select 来自 ES6 表单的所有无线电组？

Question

我想 select 使用 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 个广播组：question1、quesiton2、question3

因此，从 JavaScript（不是 jquery）开始，我想创建一个包含以下组名称的数组：["question1", "question2", "question3"] 或至少 select每组第一个输入

我尝试使用：

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

但是这 returns 我所有的输入，现在我不知道如何制作一个过滤器来保留每组的一个输入，你能帮我吗？

Answer 1

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

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 2

您可以在此处放置多个选择器，例如：第一个选择单选框，另一个选择值或您选择的任何特定 data-attr 以将单选框分组，如代码片段

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>

Answer 3

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)

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

它是如何工作的

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

如何 select 来自 ES6 表单的所有无线电组？

How to select all radio groups from a form with ES6?

javascript

radio-group

radio-button