Cómo marcar un botón de radio usando JavaScript o jQuery

Para seleccionar un botón de radio, establece su propiedad checked en true. Usa JavaScript para buscar la entrada por su id o su value; jQuery permite hacer lo mismo con .prop('checked', true). Los botones de radio de un grupo comparten el mismo name, así que marcar una entrada la selecciona dentro de ese grupo.

Este formulario proporciona los ID, el nombre del grupo y los valores que se usan a continuación:

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>

Marcar un botón de radio con JavaScript

Si conoces el ID, document.querySelector('#myradio_1').checked = true selecciona la primera entrada. # indica un selector de ID y .checked contiene el estado de selección actual.

Para seleccionar por valor dentro de este formulario, usa document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true. Limitar el selector al formulario y al grupo de botones de radio evita que coincida con otra entrada de la página. Un selector de valor sin ese ámbito solo es adecuado cuando dicho valor es único entre las entradas coincidentes del documento.

La siguiente ilustración independiente de JavaScript representa el estado marcado sin usar el DOM de un navegador. Los selectores específicos del navegador anteriores sí usan la API del DOM.

Ejecuta este ejemplo:

const radios = [
  { id: "myradio_1", value: "1", checked: false },
  { id: "myradio_2", value: "2", checked: false },
  { id: "myradio_3", value: "3", checked: false }
];

const chosenRadio = radios.find((radio) => radio.id === "myradio_1");
chosenRadio.checked = true;
console.log(radios.find((radio) => radio.checked).value);

1

Marcar un botón de radio con jQuery

Carga jQuery antes de ejecutar estas llamadas. Para una entrada cuyo ID conoces, usa $('#myradio_1').prop('checked', true). Para seleccionar por valor, limita el selector al formulario: $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true). El método .prop() establece el estado marcado actual; el valor de un atributo HTML antiguo no refleja de forma fiable los cambios posteriores del usuario.

Marcar un botón de radio al hacer clic en un botón

Añade un botón y gestiona su clic con JavaScript. Si el botón está fuera del formulario, asígnale type="button" para que no lo envíe. Esta ilustración completa de una página del navegador marca Option 1 cuando se hace clic en el botón; es código fuente estático y no se afirma que tenga una salida de ejecución. La etiqueta «Option 1» del ejemplo se conserva en inglés.

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>
<button id="button_1" type="button">Select Option 1</button>
<script>
  document.querySelector('#button_1').addEventListener('click', () => {
    document.querySelector('#preferences input[value="1"]').checked = true;
  });
</script>