'How to check a radio button with jQuery?

I try to check a radio button with jQuery. Here's my code:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

And the JavaScript:

jQuery("#radio_1").attr('checked', true);

Doesn't work:

jQuery("input[value='1']").attr('checked', true);

Doesn't work:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Doesn't work:

Do you have another idea? What am I missing?

Solution 1:^[1]

Try this.

In this example, I'm targeting it with its input name and value

$("input[name=background][value='some value']").prop("checked",true);

Good to know: in case of multi-word value, it will work because of apostrophes, too.

Solution 2:^[2]

One more function prop() that is added in jQuery 1.6, that serves the same purpose.

$("#radio_1").prop("checked", true);

Solution 3:^[3]

Short and easy to read option:

$("#radio_1").is(":checked")

It returns true or false, so you can use it in "if" statement.

Solution 4:^[4]

Try this.

To check Radio button using Value use this.

$('input[name=type][value=2]').attr('checked', true);

$('input[name=type][value=2]').attr('checked', 'checked');

$('input[name=type][value=2]').prop('checked', 'checked');

To check Radio button using ID use this.

$('#radio_1').attr('checked','checked');

$('#radio_1').prop('checked','checked');

Solution 5:^[5]

Use prop() mehtod

Source Link

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

Solution 6:^[6]

Try This:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

Solution 7:^[7]

The $.prop way is better:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

and you can test it like the following:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

Solution 8:^[8]

Surprisingly, the most popular and accepted answer ignores triggering appropriate event despite of the comments. Make sure you invoke .change(), otherwise all the "on change" bindings will ignore this event.

$("#radio_1").prop("checked", true).change();

Solution 9:^[9]

You have to do

jQuery("#radio_1").attr('checked', 'checked');

That's the HTML attribute

Solution 10:^[10]

Try this

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

Solution 11:^[11]

If property name does not work don't forget that id still exists. This answer is for people who wants to target the id here how you do.

$('input[id=element_id][value=element_value]').prop("checked",true);

Because property name does not work for me. Make sure you don't surround id and name with double/single quotations.

Cheers!

Solution 12:^[12]

We should want to tell it is a radio button.So please try with following code.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

Solution 13:^[13]

Yes, it worked for me like a way:

$("#radio_1").attr('checked', 'checked');

Solution 14:^[14]

Try this with example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

Solution 15:^[15]

$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

Solution 16:^[16]

Get value:

$("[name='type'][checked]").attr("value");

Set value:

$(this).attr({"checked":true}).prop({"checked":true});

Radio Button click add attr checked:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

Solution 17:^[17]

Just in case anyone is trying to achieve this while using jQuery UI, you will also need to refresh the UI checkbox object to reflect the updated value:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

Solution 18:^[18]

I use this code:

I'm sorry for English.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

Solution 19:^[19]

This answer is thanks to Paul LeBeau in a comment. I thought I'd write it up as a proper answer since there surprisingly wasn't one.

The only thing that worked for me (jQuery 1.12.4, Chrome 86) was:

$(".js-my-radio-button").trigger("click");

This does everything I want – changes which radio button looks selected (both visually and programmatically) and triggers events such as change on the radio button.

Just setting the "checked" attribute as other answers suggest would not change which radio button was selected for me.

Solution 20:^[20]

Try this

var isChecked = $("#radio_1")[0].checked;

Solution 21:^[21]

I've just have a similar problem, a simple solution is to just use:

.click()

Any other solution will work if you refresh radio after calling function.

Solution 22:^[22]

function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

Solution 23:^[23]

$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

Solution 24:^[24]

I got some related example to be enhanced, how about if I want to add a new condition, lets say, if I want colour scheme to be hidden after I click on project Status value except Pavers and Paving Slabs.

Example is in here:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/

Solution 25:^[25]

attr accepts two strings.

The correct way is:

jQuery("#radio_1").attr('checked', 'true');

Solution 26:^[26]

In addition, you can check if the element is checked or not:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

You can checked for unchecked element:

$('.myCheckbox').attr('checked',true) //Standards way

You can also uncheck this way:

$('.myCheckbox').removeAttr('checked')

You can checked for radio button:

For versions of jQuery equal or above (>=) 1.6, use:

$("#radio_1").prop("checked", true);

For versions prior to (<) 1.6, use:

$("#radio_1").attr('checked', 'checked');

Solution 27:^[27]

I used jquery-1.11.3.js

Basic Enable & disable

Tips 1: (Radio button type common Disable & Enable)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true);

Tips 2: ( ID selector Using prop() or attr())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Tips 3: ( Class selector Using prop() or arrt())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

OTHER TIPS

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

Solution 28:^[28]

try this

 $("input:checked", "#radioButton").val()

if checked returns True if not checked returns False

jQuery v1.10.1

Solution 29:^[29]

Some times above solutions do not work, then you can try below:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Another way you can try is:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Umesh Patil
Solution 3	TeaCupApp
Solution 4
Solution 5	Code Spy
Solution 6	user4457035
Solution 7	Amin Saqi
Solution 8	apatsekin
Solution 9	JohnP
Solution 10	Nisarg Shah
Solution 11	Anjana Silva
Solution 12	UWU_SANDUN
Solution 13	Anjan Kant
Solution 14	saroj
Solution 15	Eray
Solution 16
Solution 17	Colin R. Turner
Solution 18	Community
Solution 19	Henrik N
Solution 20	Nazik
Solution 21	spenibus
Solution 22	Seth
Solution 23	dominicbri7
Solution 24	azim hamdan
Solution 25	keroles Monsef
Solution 26	Majedur
Solution 27	venkatskpi
Solution 28	The Hungry Dictator
Solution 29	paxdiablo

'How to check a radio button with jQuery?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

I use this code:

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]

Solution 5:^[5]

Solution 6:^[6]

Solution 7:^[7]

Solution 8:^[8]

Solution 9:^[9]

Solution 10:^[10]

Solution 11:^[11]

Solution 12:^[12]

Solution 13:^[13]

Solution 14:^[14]

Solution 15:^[15]

Solution 16:^[16]

Solution 17:^[17]

Solution 18:^[18]

Solution 19:^[19]

Solution 20:^[20]

Solution 21:^[21]

Solution 22:^[22]

Solution 23:^[23]

Solution 24:^[24]

Solution 25:^[25]

Solution 26:^[26]

Solution 27:^[27]

Solution 28:^[28]

Solution 29:^[29]