Search code examples
javascripthtmlradio-button

Check a radio button with javascript

For some reason, I can't seem to figure this out.

I have some radio buttons in my html which toggles categories:

<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

The user can select whichever he/she wants, but when an certain event triggers, I want to set 1234 to be set checked radio button, because this is the default checked radio button.

I have tried versions of this (with and without jQuery):

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

But it doesn't seem to update. I need it to visibly update so the user can see it. Can anybody help?

EDIT: I'm just tired and overlooked the #, thanks for pointing it out, that and $.prop().

Solution

  • Do not mix CSS/JQuery syntax (# for identifier) with native JS.

    Native JS solution:

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

    To also trigger the associated event (e.g. if related controls need to be shown/hidden), call click():

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

    JQuery solution:

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