formularios - formulario html ejemplo

Múltiples grupos de botones de radio en una forma

Question

¿Es posible tener múltiples grupos de botones de radio en una sola forma? Por lo general, seleccionar un botón deselecciona el anterior, solo necesito tener uno de un grupo deseleccionado.

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

Answer 1

Establecer atributos de igual name 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>

Answer 2

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

Answer 3

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.

Answer 4

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 también en 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> 

Answer 5

en el campo de entrada haga el mismo nombre como

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