Check a radio button with javascript

Handling IDs in JavaScript

If your radio button boasts a unique id, skip prefixes such as '#':

// No '#' here, thank you!
document.getElementById('option1').checked = true;


Notice how getElementById doesn't need the '#' or any other selector sign — just the bare id string.

Managing radio button groups

When controlling several radio buttons with the same name, you might want to go for:

// Precision at its finest!
document.querySelector('input[name="group1"][value="value2"]').checked = true;


Leveraging querySelector with its CSS selector syntax allows you to target specific values - that's how you maintain clean and scalable scripts.

Benefit from jQuery

For those who prefer jQuery, setting a radio button as checked becomes:

// jQuery's ready, are you?
$(document).ready(function(){
  $('input[name=group1][value=value3]').prop('checked', true);
});


jQuery can simplify complex selectors, but let's not forget: it also brings a dependency to your project.

A few considerations

When programmatically manipulating form controls, remember:

• Form design — A pre-selected radio button should not confuse users. They should understand the reason for a pre-selection.
• Accessibility — Use aria-checked so screen readers can announce the checked state.
• Visual Feedback — Charge into the code battlefield and confirm that the GUI reflects the change when the radio button is programmatically checked.
• Placement of the script— Load your JavaScript after your HTML elements have fully loaded to prevent script-blocked loading, or use the DOMContentLoaded event with your script.

Debugging Tips

If the button isn't checking:

• Did you use the right id without a '#' symbol?
• Have you checked spelling errors in fetching the button id?
• Is your script running after the full page load?

Try it out!

A hands-on approach is the best way to learn, so considering using an online editor like JSFiddle to test your scenarios and understand them working in real-time.

Merging HTML, JavaScript, and CSS

In a static HTML form, a checked radio button looks like:

<!-- Tick-tock bubbling brook -->
<input type="radio" name="group1" value="value3" checked>


However, use JavaScript to dynamically check radio buttons, and CSS for styling. Keep any static narratives in HTML.