一种形式的多个单选按钮组

113

可以在一个表单中有多个单选按钮组吗？通常选择一个按钮会取消选择前一个按钮，我只需要取消选择一组按钮中的一个即可。

<form>
    <fieldset id="group1">
        <input type="radio" value="">
        <input type="radio" value="">
    </fieldset>

    <fieldset id="group2">
        <input type="radio" value="">
        <input type="radio" value="">
        <input type="radio" value="">
    </fieldset>
</form>

html forms radio-group

— 亚历克斯
source

16

给他们起个名字（即<input type="checkbox" name="checkGroup1" value =""/>

— Paul

194

设置相等的name属性以创建组；

<form>
  <fieldset id="group1">
    <input type="radio" value="value1" name="group1">
    <input type="radio" value="value2" name="group1">
  </fieldset>

  <fieldset id="group2">
    <input type="radio" value="value1" name="group2">
    <input type="radio" value="value2" name="group2">
    <input type="radio" value="value3" name="group2">
  </fieldset>
</form>

展开摘要

— 潘基斯
source

1

如果每次值均等于“”，我如何知道选择了哪个单选按钮？我怎么知道是否选择了单选按钮？

— user3182532 '17

23

插入您自己的值

— pankijs

12

只需做一件事，我们就需要为相同的类型设置name属性。例如

请尝试以下方法：

<form>
    <div id="group1">
        <input type="radio" value="val1" name="group1">
        <input type="radio" value="val2" name="group1">
    </div>
</form>

而且我们也可以做到这一点在angular1，角2或jQuery中也。

<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>

— 昆瓦尔·辛格
source

8

这非常简单，您需要为每个无线电输入组保留不同的名称。

      <input type="radio" name="price">Thousand<br>
      <input type="radio" name="price">Lakh<br>
      <input type="radio" name="price">Crore
      
      </br><hr>

      <input type="radio" name="gender">Male<br>
      <input type="radio" name="gender">Female<br>
      <input type="radio" name="gender">Other

展开摘要

— 纳希德·雷曼（Nahid Rehman）
source

2

要创建一组输入，您可以创建一个自定义html元素

window.customElements.define('radio-group', RadioGroup);

https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47

要在每个组中保留选定的选项，您需要将name属性添加到组中的输入中，如果不添加它，则全部为一组。

— 用户名
source

2

您能指定如何解决问题吗？这也只创建了一个组，是否为您以此方式创建的每个组的输入添加了唯一的名称？

— Marthyn Olthof

2

在输入字段中使名称相同

<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >

— 莫斯费克·阿尼克（Mosfeq Anik）
source