¿Cómo asigno el valor de un botón de opción inicialmente como marcado en HTML?
¿Cómo asigno el valor de un botón de opción inicialmente como marcado en HTML?
Respuestas:
Puede usar el checked
atributo para esto:
<input type="radio" checked="checked">
Solo puedes usar:
<input type="radio" checked />
Usar solo el atributo marcado sin indicar un valor es el mismo que checked="checked"
.
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 mValue
que está asociado con los botones de radio. Para tener uno de estos botones de radio preseleccionados, asigne la $scope
variable 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.
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 checked
atributo 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 checked
atributo (la clave ), ignorando su valor, se verificará la última entrada del grupo.
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í ...
ng-checked="true"
es del repertorio angularjs.
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" />
Llego un poco tarde a la fiesta y sé que el OP dijo html, pero si necesita hacer esto en MVC, puede configurarlo 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
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"}
/>