How to check a radio button with jQuery?

Question

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?

Thanks for your responses! I found the problem. Actually, the two first ways to do it are working. The point is I used jqueryUI to transform a set of 3 radio buttons into a button set with this code : jQuery("#type").buttonset(); but making this change before checking the radio was breaking the radio set (don't know why). Finally, I put the buttonset call after checking the radio and it works impeccably. — Alexis, Apr 14 '11 at 18:43

score 1674 · Accepted Answer · edited Dec 03 '17 at 04:44

1674

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');

Tip: You may also want to call click() or change() on the radio button afterwards. See comments for more info.

edited Dec 03 '17 at 04:44

ADTC

8,999
5
68
93

answered Apr 14 '11 at 15:49

Mike Thomsen

36,828
10
60
83

84

In jQuery 1.9 or higher this solution won't work. Use $("#radio_1").prop("checked", true); instead. – installero Mar 15 '13 at 18:48
44

It helpful to add `.change()` to the end to trigger any other events on the page. – Foxinni Sep 17 '13 at 10:44
34

If you want the other radio buttons in the radio group to update properly use `$("#radio_1").prop("checked", true).trigger("click");` – Paul LeBeau Mar 29 '16 at 13:52

Vladimir Djuricic · Answer 2 · 2015-02-19T11:07:39.423

298

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.

edited Feb 19 '15 at 11:07

answered Nov 16 '12 at 10:43

Vladimir Djuricic

4,323
1
21
22

For some reason this one worked for me for one troublesome radio group when just using the ID didn't work. – Michael K Apr 14 '22 at 18:46
@MichaelK maybe there's another element that has same id and it is not an input type? – Vladimir Djuricic Apr 15 '22 at 19:08
I looked for that, but there is nothing else with the same id. It is strange. I notice in the source I have "checked" for the originally checked radio button. But in the inspector I see it is checked="" so I wonder if that difference means anything. – Michael K Apr 19 '22 at 16:58

score 100 · Answer 3 · edited Apr 22 '13 at 06:03

100

Short and easy to read option:

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

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

edited Apr 22 '13 at 06:03

TeaCupApp

11,316
18
70
150

answered Oct 17 '12 at 10:20

Petr Lazarev

3,102
1
21
20

7

Thanks! This is what I was looking for, but (FYI) the OP was asking how to SET the radio button, not get the value. (The word "check" made the question confusing.) – Bampfer May 14 '15 at 21:54

score 98 · Answer 4 · answered Jan 03 '12 at 08:20

98

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

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

answered Jan 03 '12 at 08:20

Umesh Patil

10,475
16
52
80

15

the `attr('checked', true)` stopped working for me with jQuery 1.9, this is the solution! – Pascal Feb 26 '13 at 15:40

Lakshmana Kumar · Answer 5 · 2013-06-21T06:01:39.010

36

Try this.

To check Radio button using Value use this.

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

Or

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

Or

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

To check Radio button using ID use this.

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

Or

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

edited Jun 21 '13 at 06:01

answered Dec 20 '12 at 06:12

Lakshmana Kumar

1,199
3
16
34

score 23 · Answer 6 · answered Feb 07 '20 at 06:00

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>

score 17 · Answer 7 · answered Jul 19 '13 at 08:37

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();
    });        
});

score 17 · Answer 8 · answered Jan 15 '15 at 10:08

17

Try This:

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

http://jsfiddle.net/nwo706xw/

answered Jan 15 '15 at 10:08

user4457035

171
1
2

Importantly `.val(['1'])` not `.val('1')` – Bob Stein Sep 14 '16 at 17:15

score 16 · Answer 9 · answered Feb 20 '19 at 04:28

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();

score 9 · Answer 10 · answered Apr 14 '11 at 15:50

9

You have to do

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

That's the HTML attribute

answered Apr 14 '11 at 15:50

JohnP

49,507
13
108
140

score 8 · Answer 11 · answered Nov 26 '20 at 22:20

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.

score 7 · Answer 12 · answered Aug 01 '14 at 14:06

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!

score 7 · Answer 13 · edited Nov 01 '17 at 09:52

7

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
        }
    });
});

edited Nov 01 '17 at 09:52

Nisarg Shah

14,151
6
34
55

answered Oct 22 '14 at 13:19

Jordan Jelinek

136
2
9

score 7 · Answer 14 · answered Jul 09 '15 at 13:01

7

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

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

answered Jul 09 '15 at 13:01

UWU_SANDUN

1,123
13
19

score 7 · Answer 15 · answered Oct 27 '15 at 07:28

7

Yes, it worked for me like a way:

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

answered Oct 27 '15 at 07:28

Anjan Kant

4,090
41
39

score 6 · Answer 16 · answered Nov 25 '14 at 22:12

6

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

answered Nov 25 '14 at 22:12

Eray

79
1
1

Naim Serin · Answer 17 · 2015-04-23T20:19:11.187

6

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});
});

edited Apr 23 '15 at 20:19

answered Mar 19 '15 at 10:28

Naim Serin

71
1
3

score 6 · Answer 18 · answered Jun 21 '17 at 07:31

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>

score 6 · Answer 19 · answered Aug 15 '17 at 17:05

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

score 5 · Answer 20 · edited Jun 20 '20 at 09:12

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>

score 4 · Answer 21 · edited Mar 20 '13 at 09:12

4

Try this

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

edited Mar 20 '13 at 09:12

Nazik

8,696
27
77
123

answered Mar 20 '13 at 08:54

user2190046

41
1

score 4 · Answer 22 · edited Oct 05 '15 at 01:55

4

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.

edited Oct 05 '15 at 01:55

spenibus

4,339
11
26
35

answered Oct 05 '15 at 01:38

espace

49
2

1

call click sometimes is a headache in ie9 – Astolfo Hoscher Oct 27 '16 at 18:05

score 4 · Answer 23 · edited Feb 02 '16 at 17:43

4

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

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

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

edited Feb 02 '16 at 17:43

Seth

10,198
10
45
68

answered Dec 18 '15 at 15:12

MadhaviLatha Bathini

51
3

score 4 · Answer 24 · answered Jan 17 '19 at 10:06

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');

score 3 · Answer 25 · answered Oct 27 '14 at 09:46

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/

score 3 · Answer 26 · answered Sep 20 '18 at 18:23

3

attr accepts two strings.

The correct way is:

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

answered Sep 20 '18 at 18:23

keroles Monsef

679
7
15

score 3 · Answer 27 · answered Apr 14 '11 at 15:50

3

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

answered Apr 14 '11 at 15:50

dominicbri7

2,479
4
23
33

2

`$("#radio_1").attr('checked', true);` this won't work. As mentioned by the OP – JohnP Apr 14 '11 at 15:53
2

Please explain the code in your answers, and read the question (this has been tried) – SomeKittens Apr 12 '14 at 20:48

score 3 · Answer 28 · answered Aug 02 '19 at 07:48

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>

score 2 · Answer 29 · edited Apr 24 '14 at 11:45

2

try this

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

if checked returns True if not checked returns False

jQuery v1.10.1

edited Apr 24 '14 at 11:45

The Hungry Dictator

3,444
5
37
53

answered Apr 24 '14 at 11:26

pst

56
4

score 2 · Answer 30 · edited Sep 17 '14 at 03:03

2

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

edited Sep 17 '14 at 03:03

paxdiablo

854,327
234
1,573
1,953

answered Sep 17 '14 at 02:44

Pankaj Bhagwat

37
1

1

[Uniform](http://uniformjs.com/) is a jQuery plugin that makes forms prettier, but it does that by adding extra elements. Whenever I update the checked value, the extra element state is not updated, leading to an invisible input that is not checked, but with a visible background element that looks checked. `jQuery.uniform.update()` is the solution! – Denilson Sá Maia Sep 19 '14 at 23:42

score 1 · Answer 31 · edited Jan 02 '15 at 06:05

1

Try This:

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

edited Jan 02 '15 at 06:05

Sameeraa4ever

568
7
20

answered Jun 09 '14 at 07:26

user3721473

21
2

This won't work without including the file for the `checkboxradio` plugin, which is pointless when you can just use jQuery's built in functions to accomplish this (see accepted answer). – Nathan Jan 02 '15 at 06:48

score 1 · Answer 32 · answered May 21 '19 at 07:15

In case you don't want to include a big library like jQuery for something this simple, here's an alternative solution using built-in DOM methods:

// Check checkbox by id:
document.querySelector('#radio_1').checked = true;

// Check checkbox by value:
document.querySelector('#type > [value="1"]').checked = true;

// If this is the only input with a value of 1 on the page, you can leave out the #type >
document.querySelector('[value="1"]').checked = true;

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

Kamil Kiełczewski · Answer 33 · 2022-10-27T14:35:50.117

-4

Shortest

radio_1.checked

checkBtn.onclick = e=> {
  console.log( radio_1.checked );
}

Select first radio and click button
<!-- Question html -->
<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>

<!-- Test html -->
<button id="checkBtn">Check</button>

jsfiddle snippet here

edited Oct 27 '22 at 14:35

answered Jun 25 '20 at 14:59

Kamil Kiełczewski

85,173
29
368
345

Some guys give minus points without comment - but this short solution actually works – Kamil Kiełczewski Feb 02 '22 at 11:27

How to check a radio button with jQuery?

33 Answers33

I use this code:

Shortest

Linked

Related