How to Check a Radio Button Using JavaScript or jQuery

To select a radio button, set its checked property to true. Use JavaScript to find the input by its id or by its value; jQuery can do the same with .prop('checked', true). A radio group shares one name, so checking one input selects it in that group.

This form supplies the IDs, group name, and values used below:

<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>

Check a Radio Button with JavaScript

For a known ID, document.querySelector('#myradio_1').checked = true selects the first input. The # marks an ID selector, and .checked is the live selection state.

To select by value within this form, use document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true. Scoping the selector to the form and radio group avoids matching an unrelated input elsewhere on the page. An unscoped value selector is appropriate only when that value is unique among matching inputs in the document.

The following standalone JavaScript illustration models the checked state without a browser DOM. The browser-specific selectors above use the actual DOM API.

Run this example:

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

Check a Radio Button with jQuery

Load jQuery before running these calls. For an input with a known ID, use $('#myradio_1').prop('checked', true). For a value, scope the selector to the form: $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true). The .prop() method sets the current checked state; an older HTML attribute value does not reliably represent later user changes.

Check a Radio Button on a Button Click

Add a button and handle its click with JavaScript. A button outside the form should use type="button" so it does not submit the form. This complete browser-page illustration checks Option 1 when the button is clicked; it is static source and has no claimed runtime output.

<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>