Plusieurs groupes de boutons radio dans un seul formulaire


113

Est-il possible d'avoir plusieurs groupes de boutons radio dans un seul formulaire? Habituellement, la sélection d'un bouton désélectionne le précédent, j'ai juste besoin de désélectionner l'un des groupes.

<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
Donnez-leur des noms (ie<input type="checkbox" name="checkGroup1" value =""/>
paul

Réponses:


194

Définissez des nameattributs égaux pour créer un groupe;

<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
si la valeur est égale à "" à chaque fois, comment savoir quel bouton radio a été choisi? comment savoir si un bouton radio a été choisi?
user3182532

23
Insérez vos propres valeurs
pankijs

12

Faites juste une chose, nous devons définir la propriété name pour les mêmes types. par exemple.

Essayez ci-dessous:

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

Et nous pouvons également le faire en angular1, angular 2 ou en jquery également.

<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

C'est très simple, vous devez conserver des noms différents pour chaque groupe d'entrée radio.

      <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

Pour créer un groupe d'entrées, vous pouvez créer un élément html personnalisé

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

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

pour conserver l'option sélectionnée dans chaque groupe, vous devez ajouter un attribut de nom aux entrées du groupe, si vous ne l'ajoutez pas, tout est un groupe.


2
Pouvez-vous préciser comment cela résout le problème de la question? Cela crée également un seul groupe, ajoute-t-il un nom unique aux entrées de chaque groupe que vous créez de cette façon?
Marthyn Olthof

2

dans le champ de saisie, faites le même nom comme

<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" >
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.