单选按钮阵列

Question

我有一个表单，您可以在某个位置添加同一个问题的多行。简化版本如下所示：

<input type="text" name="name[]" value=""/> 
<input type="radio" name="opted[]" value="Yes" /> Yes 
<input type="radio" name="opted[]" value="No" /> No 

上面的行克隆在每个“添加朋友”按钮上单击。这适用于文本字段，因为我从提交的所有行中获取值，但单选按钮不起作用，因为它具有相同的名称并单击它会干扰其他克隆的行。

任何想法如何解决这个问题？

Answer 1

将name="opted[]"替换为name="opted[123]"，其中123是唯一标识符，以便每组答案都被分组。

然后，可以通过以下两种方法的访问的形式的元素：

var method1 = document.getElementsByName("opted[123]"); 
var method2 = document.querySelectorAll("[name='opted[123]']"); 
//Both vanilla-JavaScript methods return a NodeList, consisting of all 
// elements with name="opted[123]"