Sometimes, we want to select and trigger click event of a radio button in jQuery and JavaScript.

In this article, we’ll look at how to select and trigger click event of a radio button in jQuery and JavaScript.

How to select and trigger click event of a radio button in jQuery and JavaScript?

To select and trigger click event of a radio button in jQuery and JavaScript, we should bind the click event handler before we trigger a click on the radio button.

For instance, we write:

<div id='checkboxDiv'>
  <input type='radio' name='foo'>
  <input type='radio' name='foo'>
</div>

to add a div with 2 radio buttons inside.

Then we write:

$("#checkboxDiv input:radio").click(() => {
  console.log("clicked");
});

$("input:radio:first").prop("checked", true).trigger("click")

We select the radio buttons with $("#checkboxDiv input:radio").

Then we call click on it to bind the radio buttons to the click event handler.

Next, we call $("input:radio:first").prop to get the radio buttons that has the checked attribute set to true.

And we call trigger with 'click' to trigger click on the checked radio button.

Conclusion

To select and trigger click event of a radio button in jQuery and JavaScript, we should bind the click event handler before we trigger a click on the radio button.