1つのフォームに複数のラジオボタングループ


113

1つのフォームに複数のラジオボタングループを含めることはできますか?通常、1つのボタンを選択すると前のボタンが選択解除されます。グループの1つを選択解除するだけで済みます。

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

16
(それらの名前を付けすなわち<input type="checkbox" name="checkGroup1" value =""/>
ポール・

回答:


193

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


1
値が毎回 ""の場合、どのラジオボタンが選択されたかを知るにはどうすればよいですか?ラジオボタンが選択されたかどうかを確認するにはどうすればよいですか?
user3182532 2017

23
独自の値を挿入
pankijs

12

1つのことだけを行ってください。同じタイプの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>  

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


2

入力のグループを作成するには、カスタムHTML要素を作成できます

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

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

各グループで選択したオプションを保持するには、グループの入力に名前属性を追加する必要があります。追加しない場合、すべてが1つのグループになります。


2
これが質問の問題をどのように修正するかを指定できますか?これによりグループも1つだけ作成されます。この方法で作成した各グループの入力に一意の名前が追加されますか?
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" >
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.