Asigne un valor inicial al botón de opción como marcado

138

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

Rinkal Bhanderi
fuente

Respuestas:

164

Puede usar el checkedatributo para esto:

<input type="radio" checked="checked">
polarblau
fuente
11
también puede mencionar ese atributo sin valor asignado, es decir, <input type = "radio" marcado>
niksvp
1
@niksvp Creo que Check = "Checked" es la forma válida de comprobar previamente un botón de radio: simplemente usar "check" no es HTML válido (a pesar de que la mayoría de los navegadores lo admiten)
Matt Healy
9
@matthewh - nah, puede usar solo "marcado" por sí mismo y es HTML válido (aunque no XHTML válido). Personalmente, prefiero 'check = "check"', pero no tiene que usarlo ... de hecho, hay un caso bastante fuerte en contra de usarlo.
Algy Taylor
55

Solo puedes usar:

<input type="radio" checked />

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

seedg
fuente
como dijo @Matt Healey, el uso de marcado sin el atributo no es HTML válido
salvob
16
@salvob incorrecto. no es válido X html, sin embargo, es completamente válido para HTML5, que es un estándar tan global como cualquier otro.
Chris Marisic
14

He puesto esta respuesta en una pregunta similar que se marcó 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 que intente lograr esto, la respuesta es ligeramente diferente. Y en realidad 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 lo mValueque está asociado con los botones de radio. Para tener uno de estos botones de radio preseleccionados, asigne la $scopevariable asociada con el grupo al valor de entrada deseado:

$scope.mValue="second"

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

discodano
fuente
¡En efecto! Las respuestas anteriores no funcionan con Angular JS. Su respuesta resolvió mi problema. ¡Gracias! :)
Mitaksh Gupta
3

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 checkedatributo 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 cualquier otro elemento de entrada.

Como el navegador solo busca la presencia del checkedatributo (la clave ), ignorando su valor, se verificará la última entrada del grupo.

msanford
fuente
2

La otra forma de establecer los botones de opción marcados por defecto, especialmente si está usando angularjs es establecer el indicador 'ng-check' en "true", por ejemplo: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

la marcada = "marcada" no funcionó para mí ...

Deepika Pethaperumal
fuente
la causa ng-checked="true"es del repertorio angularjs.
Augustas
O establezca el valor del modelo en el controlador en "verdadero". ¡Cuidado que lo pones en una cadena, no en un booleano!
Thomas David Kehoe
2

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

Ejemplo: Esto hace que ambos botones de radio permanezcan sin marcar.

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

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

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

Llego un poco tarde a la fiesta y sé que el OP dijo html, pero si necesita hacer esto en MVC, puede configurarlo trueen 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
usuario2903379
fuente
0

Si está utilizando react-redux para su aplicación y desea mostrar los datos que se encuentran en el almacén de redux, puede configurar la opción "marcada" como se muestra a continuación.

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />
Ruks
fuente