type - radio button html5 ejemplos

Asignar un valor inicial al botón de radio como marcado

Question

¿Cómo asigno el valor de un botón de opción inicialmente como verificado en HTML?

Answer 1

He puesto esta respuesta en una pregunta similar que fue marcada como un duplicado de esta pregunta. La respuesta ha ayudado a una cantidad decente de personas, así que pensé en agregarla aquí también por si acaso.

Esto no responde exactamente la pregunta, pero para cualquiera que use AngularJS tratando de lograr esto, la respuesta es ligeramente diferente. Y, de hecho, la respuesta normal no funcionará (al menos no lo hizo para mí).

Su html se verá bastante similar al botón de radio normal:

<input type=''radio'' name=''group'' ng-model=''mValue'' value=''first'' />First
<input type=''radio'' name=''group'' ng-model=''mValue'' value=''second'' /> Second

En su controlador, habrá declarado el mValue asociado a los botones de mValue . Para tener uno de estos botones de opción preseleccionados, asigne la variable $scope asociada con el grupo al valor de la entrada deseada:

$scope.mValue="second"

Esto hace que el "segundo" botón de radio seleccionado al cargar la página.

Answer 2

La otra forma de configurar los botones de opción predeterminados, especialmente si usa angularjs, es establecer el indicador ''ng-checked'' en "verdadero", por ejemplo: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true"> Hombre

the checked = "checked" no funcionó para mí ..

Answer 3

Llegué un poco tarde a la fiesta y sé que OP dijo html, pero si necesitabas hacer esto en MVC, puedes establecer la true en el tercer parámetro.

p.ej:

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked

Answer 4

Para cualquiera que busque una solución Angular2 (2.4.8), ya que esta es una pregunta genéricamente popular cuando se busca:

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

Esto agregará el atributo checked a la entrada dada la condición, pero no agregará nada si la condición falla.

No hagas esto:

[attr.checked]="choice == defaultChoice"

porque esto agregará el atributo checked="false" a cada otro elemento de entrada.

Dado que el navegador solo busca la presencia del atributo checked (la clave ), ignorando su valor, por lo que se verificará la última entrada en el grupo.

Answer 5

Puedes simplemente usar:

<input type="radio" checked />

Usar solo el atributo marcado sin indicar un valor es lo mismo que checked="checked" .

Answer 6

Tenga en cuenta que si tiene dos botones de opción con el mismo atributo de "nombre" y tienen el atributo "requerido", agregarles el atributo "marcado" no los hará verificar.

Ejemplo: Esto hace que ambos botones de opción permanezcan desactivados.

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

Esto hará que se verifique el botón de radio "masculino".

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />

Answer 7

Puede usar el atributo checked para esto:

<input type="radio" checked="checked">