一个表单中有多个单选按钮组

Question

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

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

- AlexG

---

为它们命名（例如 <input type="checkbox" name="checkGroup1" value =""/>） - paul

Answer 1

设置相等的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>

- pankijs

---

如果值每次都等于""，我怎么知道哪个单选按钮被选择了？我怎么知道是否选择了单选按钮？ - user3182532

插入您自己的值 - pankijs

Answer 2

这很简单，您需要为每个单选框输入组保留不同的名称。

      <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

---

你发表这篇回答有什么新的补充，能够超越四年前被接受的答案吗？ - Matthieu

Answer 3

只需做一件事情，我们需要为相同类型设置名称属性。例如：

请尝试以下操作：

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

而且我们也可以在angular1、angular2或者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>  

- Kunvar Singh

Answer 4

在输入字段中，使名称与之前相同。

<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

---

你发表这篇回答有什么新的补充，能够超越四年前被接受的答案吗？ - Matthieu

Answer 5

Angular

对于那些在Angular中遇到类似问题的人，我通过将<input>的[attr.name]替换为简单的[name]来解决了我的问题，这就是问题的原因。

- Francesco Borzi

Answer 6

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

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

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

为了在每个组中保留所选选项，您需要向组中的输入添加名称属性。如果您没有添加它，则所有内容都是一个组。

- user3844710

---

可以说明一下这样做如何解决问题吗？这还会创建一个组，它是否会为以此方式创建的每个组的输入添加唯一名称？ - Marthyn Olthof