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

时间:2015-02-16 14:35:40

标签: html forms radio-group

是否可以在一个表单中拥有多个单选按钮组?通常选择一个按钮取消选择前一个按钮,我只需要取消选择一个组。

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

5 个答案:

答案 0 :(得分:133)

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:7)

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

请尝试以下操作:

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

我们也可以在angular1,angular 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>  

答案 2 :(得分:0)

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

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

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

要在每个组中保留选择的选项,需要在组中的输入中添加名称属性,如果不添加,则全部为一组。

答案 3 :(得分:0)

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

      <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

答案 4 :(得分:0)

输入字段中的

使名称相同 像

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