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


Respuestas:


164

Puede usar el checkedatributo para esto:

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

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


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.


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


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


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

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

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"}
 />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.