En este artículo, cambiaremos la opción seleccionada del botón de radio usando jQuery. Para seleccionar el valor del botón de radio, podemos configurar el «marcado» para establecer la opción deseada. Para establecer la propiedad, podemos usar el método prop() en jQuery.
Sintaxis:
$(selector).prop("checked", true);
Nota: Selector, es el elemento de la opción de radio que se desea seleccionar.
Ejemplo: Vamos a crear un grupo de botones de radio para seleccionar un jugador de cricket favorito. Hemos creado una opción de radio. De forma predeterminada, se seleccionará «Sachin». Cuando hacemos clic en el botón, la opción «Dhoni» se seleccionará como se indica en el programa.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
<fieldset>
<legend>Who is Your Favorite Cricketer?</legend>
<input type="radio"
name="favorite"
value="Dhoni" />Dhoni<br />
<input type="radio"
name="favorite"
value="Shewag" />Shewag<br />
<input type="radio"
name="favorite" checked
value="Sachin" />Sachin<br />
<br />
<button id="selectID">Select option</button>
</fieldset>
<script>
$("#selectID").on("click", function () {
selectRadio();
});
function selectRadio() {
let radioOption = jQuery("input:radio[value=Dhoni]");
// This will select the radio button
radioOption.prop("checked", true);
}
</script>
</body>
</html>
Producción:
cambiar el estado de la radio
Publicación traducida automáticamente
Artículo escrito por jagathish saravanan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA