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

Posted

技术标签:

【中文标题】一种形式的多个单选按钮组【英文标题】:Multiple radio button groups in one form 【发布时间】:2015-04-17 02:25:43 【问题描述】:

是否可以在一个表单中包含多个单选按钮组?通常选择一个按钮会取消选择上一个按钮,我只需要取消选择一组按钮。

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

【问题讨论】:

给他们起名字(即&lt;input type="checkbox" name="checkGroup1" value =""/&gt; 【参考方案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>

【讨论】:

如果 value 每次都等于 "",我怎么知道选择了哪个单选按钮?我怎么知道是否选择了单选按钮? 插入你自己的价值观【参考方案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

【讨论】:

【参考方案3】:

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

试试下面:

<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="optionj" value="optionj" (click)="checkAnswer(j+1)">option
</div>  

【讨论】:

【参考方案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" >

【讨论】:

【参考方案5】:

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

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

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

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

【讨论】:

您能具体说明这是如何解决问题的吗?这也只创建了一个组,它是否会为您以这种方式创建的每个组的输入添加一个唯一的名称?

以上是关于一种形式的多个单选按钮组的主要内容,如果未能解决你的问题,请参考以下文章

vuejs中怎么实现按钮组单选

javascript Bootstrap按钮组单选按钮

验证 2 组或更多组单选按钮,每组包含 4 个单选按钮

材质按钮切换组单选

如何指示需要一组单选按钮[重复]

在 WinForms 中对一组单选按钮进行数据绑定的最佳方法