How to set radio option checked onload with jQuery

Picture of Amitpal Singh
Amitpal Singh
August 7, 2022

You can assume, that name is unique and all radio in group has the same name. Then you can use jQuery support like that

Method 1 : Target by .is (long)

Say you had radio buttons like these, for example:
  <input type='radio' name='gender' value='Male'>
    <input type='radio' name='gender' value='Female'> 

And you wanted to check the one with a value of “Male” onload if no radio is checked:

$(function() {
        var $radios = $('input:radio[name=gender]');
        if($radios.is(':checked') === false) {
            $radios.filter('[value=Male]').prop('checked', true);
        }
    }); 

Method 2 : One-liner target (short)

$('input:radio[name="gender"][value="Male"]').prop('checked', true); 

Share this post:

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.