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

时间:2015-06-11 21:28:34

标签: javascript html radio-button

我已经传递了一个动态创建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或其他任何东西我可以将它们分开来分开分组?我尝试了字段集和图例但它没有效果。我知道我可以将每个人都放在一个表格中,但之后他们不会全部提交。

3 个答案:

答案 0 :(得分:9)

将它们放在不同的表格标签

<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>

答案 1 :(得分:0)

据我所知,你不能。单选按钮的名称定义它所在的组,然后在提交的表单的处理程序中,调用名称以获取所选的选项。使用行分隔符或div不会使它们彼此解除关联。您只能为选定的组选择一个单选按钮。如果你只想让它们在视觉上分开,奥斯汀就有了正确的想法。

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

答案 2 :(得分:-4)

我认为您想使用<fieldset>,这样您就可以在同一表单中将它们分开。

示例:https://jsfiddle.net/ndn7jmh5/2/

如果你不能这样做,请尝试使用<br/>将它们分成不同的行。