web-dev-qa-db-ja.com

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>
htmlformsradio-group
75
AlexG

グループを作成するには、等しい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>
133
pankijs

1つだけ行います。同じ型のnameプロパティを設定する必要があります。例えば。

以下を試してください

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

そしてまた、Angular 1、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>
7
Kunvar Singh

これは非常に簡単で、各無線入力グループに異なる名前を付ける必要があります。

      <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
0
Nahid Rehman

入力フィールドで名前を同じにする

<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" >
0
Mosfeq Anik

入力のグループを作成するには、カスタムのhtml要素を作成します。

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

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

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

0
user3844710