Varios grupos de botones de opción en una forma

113

¿Es posible tener varios grupos de botones de opción en un solo formulario? Por lo general, al seleccionar un botón se anula la selección del anterior, solo necesito que se anule la selección de uno de un grupo.

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

16

Dales nombres (p<input type="checkbox" name="checkGroup1" value =""/>

— Pablo

194

Establecer nameatributos iguales para crear un grupo;

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

Expandir fragmento

— pankijs
fuente

1

si el valor es igual a "" cada vez, ¿cómo sé qué botón de opción se eligió? ¿Cómo sé si se eligió un botón de opción?

— user3182532

23

Inserte sus propios valores

— pankijs

12

Solo haga una cosa, necesitamos establecer la propiedad de nombre para los mismos tipos. por ej.

Prueba a continuación:

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

Y también podemos hacerlo en angular1, angular 2 o en jquery también.

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

8

Esto es muy simple, necesita mantener diferentes nombres de cada grupo de entrada de 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

Expandir fragmento

— Nahid Rehman
fuente

2

Para crear un grupo de entradas, puede crear un elemento html personalizado

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

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

para mantener la opción seleccionada en cada grupo, debe agregar el atributo de nombre a las entradas en el grupo, si no lo agrega, entonces todo es un grupo.

— usuario3844710
fuente

2

¿Puede especificar cómo esto soluciona el problema de la pregunta? Esto también crea solo un grupo, ¿agrega un nombre único a las entradas de cada grupo que crea de esta manera?

— Marthyn Olthof

2

en el campo de entrada hacer el mismo nombre

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