Più gruppi di pulsanti di opzione in una forma

113

È possibile avere più gruppi di pulsanti di opzione in un'unica forma? Di solito selezionando un pulsante si deseleziona il precedente, ho solo bisogno di deselezionare uno di un gruppo.

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

html forms radio-group

— AlexG
fonte

16

Assegna loro dei nomi (ad esempio<input type="checkbox" name="checkGroup1" value =""/>

— paolo,

194

Imposta nameattributi uguali per creare un gruppo;

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

Espandi lo snippet

— pankijs
fonte

1

se il valore è sempre uguale a "", come faccio a sapere quale pulsante di opzione è stato scelto? come faccio a sapere se è stato scelto un pulsante di opzione?

— user3182532

23

Inserisci i tuoi valori

— pankijs

12

Basta fare una cosa, dobbiamo impostare la proprietà name per gli stessi tipi. per es.

Prova di seguito:

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

E possiamo anche farlo in angular1, angular 2 o anche in 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>

— Kunvar Singh
fonte

8

Questo è molto semplice, è necessario mantenere nomi diversi di ogni gruppo di ingressi 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

Espandi lo snippet

— Nahid Rehman
fonte

2

Per creare un gruppo di input puoi creare un elemento html personalizzato

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

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

per mantenere l'opzione selezionata in ogni gruppo, è necessario aggiungere l'attributo name agli input nel gruppo, se non lo si aggiunge, tutto è un gruppo.

— user3844710
fonte

2

Puoi specificare come questo risolve il problema della domanda? Questo crea anche un solo gruppo, aggiunge un nome univoco agli input di ogni gruppo che crei in questo modo?

— Marthyn Olthof

2

nel campo di input rendere il nome uguale a

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

— Mosfeq Anik
fonte