具有相同名称的多个单选按钮组

Question

我收到了一个动态创建 HTML 的复杂应用程序。

问题是，以前的人并不知道单选按钮的“名称”属性实际上是组关联。

使用以下标记，有没有办法将它们分成两组

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 1 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 1 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 1 Option 3</label>
</div>

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 2 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 2 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 2 Option 3</label>
</div>

是否有任何 div 或任何我可以环绕它们来分隔分组的东西？我试过字段集和图例，但没有效果。我知道我可以将每个人都放在一个表格中，但他们不会全部提交。

原文由 clamchoda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将它们放在不同的表单标签中

<form>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 1 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 1 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 1 Option 3</label>
</form>

<form>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 2 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 2 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 2 Option 3</label>
</form>

原文由 RJ.Hwang 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

据我所知，你不能。单选按钮的名称定义了它所在的组，然后在提交表单的处理程序中，调用该名称以获取所选选项。使用行分隔符或 div 不会解除它们之间的关联。您只能为一组选择一个单选按钮。如果您只希望它们在视觉上分开，Austin 的想法是正确的。

更改每个单独组的名称是允许 2 个选定按钮的唯一选项。

原文由 Ryan 发布，翻译遵循 CC BY-SA 3.0 许可协议