html - Marcar un botón de opción con javascript

Por alguna razón, no parece que pueda resolver esto.

Tengo algunos botones de radio en mi HTML que cambian las categorías:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

El usuario puede seleccionar el que quiera, pero cuando se desencadene cierto evento, quiero que se establezca 1234 como el botón de opción marcado, porque este es el botón de opción marcado por defecto.

He intentado versiones de esto (con y sin jQuery):

document.getElementById('#_1234').checked = true;

Pero no parece actualizarse. Necesito que se actualice visiblemente para que el usuario pueda verlo. ¿Alguien puede ayudar?

EDIT: Solo estoy cansado y pasé por alto el #, gracias por señalarlo, eso y $.prop().

Respuesta #1

No mezcles la sintaxis de CSS/JQuery (# para identificador) con JS nativo.

Solución nativa de JS:

document.getElementById('_1234').checked = true;

Para también activar el evento asociado (por ejemplo, si se necesitan mostrar/ocultar controles relacionados), llama a click():

document.getElementById('_1234').click();

Solución JQuery:

$('#_1234').prop('checked', true);

Respuesta #2

Si quieres configurar el botón "1234", necesitas usar su "id":

document.getElementById("_1234").checked = true;

Cuando estás usando la API del navegador ("getElementById"), no usas la sintaxis de selector; solo pasas el valor real del "id" que estás buscando. Usas la sintaxis de selector con jQuery o .querySelector() y .querySelectorAll().

Respuesta #3

Hoy, en el año 2016, es seguro usar document.querySelector sin conocer el ID (especialmente si tienes más de 2 botones de opción):

document.querySelector("input[name=main-categories]:checked").value