Cómo marcar un botón de radio usando JavaScript o jQuery
- Marcar el botón de radio usando JavaScript
- Compruebe el botón de radio usando jQuery
- Marque el botón de radio basado en un clic de botón
A menudo utilizamos scripts del lado del cliente como jQuery o JavaScript, para crear sitios web interactivos y de rápido rendimiento y podemos completar operaciones simples como validaciones de formularios de manera eficiente sin ningún viaje extra al servidor web.
Dado un escenario en el que queremos un botón de radio seleccionado por defecto o en un evento de click de botón, podemos usar JavaScript o jQuery.
Comencemos por definir un formulario.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
Marcar el botón de radio usando JavaScript
Seleccione el botón de radio con ID
Una de las mejores maneras de preseleccionar un botón de radio es referirse a él por su ID. Para seleccionar el elemento DOM usando ID, añadimos el prefijo # al ID y fijamos el valor comprobado como verdadero.
document.querySelector('#myradio_1').checked = true;
Producción: Se selecciona el botón de radio 1.
Seleccione el botón de radio usando el valor
Una opción alternativa es utilizar el valor del botón de radio para preseleccionar el botón de radio. La selección por valor puede ser útil en escenarios en los que no conocemos el ID de un Botón de Radio pero conocemos el valor.
Podemos usar el ID del div padre y seleccionar el elemento cuyo valor es 2. Entonces podemos establecer el atributo checked como true.
document.querySelector('#radiobuttonset > [value="2"]').checked = true;
Producción: Se selecciona el radiobotón 2.
En algunos casos, cuando sabemos que no hay otros elementos en el DOM iguales al valor predefinido, podemos seleccionar el elemento con sólo comprobar el valor. En este caso, no necesitaremos el ID del padre.
document.querySelector('[value="3"]').checked = true;
Producción: Se selecciona el botón de radio 3.
Compruebe el botón de radio usando jQuery
Además de usar JavaScript, también podemos usar la biblioteca jQuery para comprobar un botón de radio basado en un valor predefinido. jQuery es una biblioteca, construida usando JavaScript. Ayuda a simplificar el recorrido y la manipulación del HTML DOM. La sintaxis de jQuery es también más simple que la de JavaScript.
Para agregar el uso de jQuery agregue una referencia a la biblioteca jQuery ya sea desde CDN o desde un archivo local.
Selecciona el botón de radio usando ID
Al igual que JavaScript, para acceder al elemento DOM usando ID, usamos el prefijo #. Sin embargo, la sintaxis exacta depende de la versión de jQuery utilizada.
La versión estable actual de jQuery es la 3.4.1.
La versión de jQuery es igual o superior a (>=) 1.6
Si la versión de jQuery usada es mayor o igual a 1.6, usamos prop para establecer el atributo comprobado como verdadero.
$('#myradio_1').prop('checked', true);
Producción: Se selecciona el botón de radio 1.
La versión de jQuery es la anterior a (<) 1.6
Si la versión de jQuery es anterior a la 1.6, podríamos actualizar el attr como se ha comprobado.
$('#myradio_2').attr('checked', 'checked');
Producción: El botón de radio 2 está seleccionado
Seleccione el botón de radio usando el valor
También podemos actualizar el valor seleccionado para el botón de radio en base al valor del botón.
$('input[name=radiobutton][value=\'1\']').prop('checked', true);
Producción: El botón de radio 2 está seleccionado
Marque el botón de radio basado en un clic de botón
Una vez que sabemos cómo actualizar el botón de radio usando JavaScript o jQuery, podemos actualizar la selección en base a algún evento como un clic de botón o cualquier otra selección de elementos. Para probarlo, vamos a actualizar nuestro formulario para añadir un botón.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
<button id="button_1">check 1</button>
Podemos entonces añadir un evento click en el botón. Al hacer clic, selecciona el primer botón de radio.
$('#button_1').click(function() {
$('input[name=radiobutton]').val(['1']);
});
Producción: Se selecciona el botón de radio 1