Find out whether radio button is checked with JQuery?

Question

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked.

Take, for example the following code:

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

it adds a checked attribute and all is well, but how would I go about adding an alert. For example, that pops up when the radio button is checked without the help of the click function?

possible duplicate of [Check of specific radio button is checked](http://stackoverflow.com/questions/2195125/check-of-specific-radio-button-is-checked) — Felix Kling, Jul 20 '12 at 14:31
related `Monitoring when a radio button is unchecked` http://stackoverflow.com/questions/5824639/monitoring-when-a-radio-button-is-unchecked — Adriano, Jul 07 '14 at 11:55

David Hedlund · Accepted Answer · 2011-11-02T11:52:01.907

1192

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

edited Nov 02 '11 at 11:52

answered Feb 16 '10 at 11:38

David Hedlund

128,221
31
203
222

1

Bingo! thanks David. So would I have to invoke an action (click etc) to show the alert? Is there a way to do this without clicking? – Keith Donegan Feb 16 '10 at 11:50
well, you could run the `is(':checked')` check whenever. so if you want to show something on page load, depending on whether a checkbox is checked, for instance, you can just put the same if statement in page load. – David Hedlund Feb 16 '10 at 11:56
4

This doesn't solve the "without the help of the click function", does it? – Markus Hedlund Feb 16 '10 at 11:58
6

@Znarkus: OP appears satisfied. would you argue that you own use of `('#radio_button').click` is without `click`? – David Hedlund Feb 16 '10 at 12:05
I thought he was refering to his click function. If OP has tested your solution and it works for him, all is good :) – Markus Hedlund Feb 16 '10 at 12:25
Please also add explanation as to where should others add their code. So which fields to substitute in this with what?. Thanks – pal4life Sep 28 '11 at 02:49
3

@David Second line should be `if ($('#radio_button').is(':checked'))) { alert("it's checked"); }` - you forgot the jQuery $ sign and then need to wrap it all in some more parenthesis. – zuallauz Nov 02 '11 at 08:28
2

@zua: you're right! it even had a syntax error, the way it was before (unmatched brackets). fixed – David Hedlund Nov 02 '11 at 11:53
"So would I have to invoke an action (click etc) to show the alert? Is there a way to do this without clicking?" - Okay, I know this is kinda old, but this might help others. If you want to invoke it without using click event, you can use document ready event. – finnTheHumin Aug 12 '13 at 10:39

score 177 · Answer 2 · edited Aug 30 '15 at 14:50

177

If you have a group of radio buttons sharing the same name attribute and upon submit or some event you want to check if one of these radio buttons was checked, you can do this simply by the following code :

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

Source

jQuery API Ref

edited Aug 30 '15 at 14:50

Tehsmeely

188
6

answered Jul 01 '11 at 06:01

Parag

4,754
9
33
50

This did not work for me. If I alert($("input[@name='shipping_method']:checked").val()); it still gives me the value even if the radio button is not selected. – AndrewC Jul 24 '12 at 08:08
1

Note: If you have several forms with groups of radio buttons using the same name, you need to make sure to check only those of the form that is submitted. One option to do this is using the find method on the form: `$('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {` – Benjamin May 08 '15 at 10:35

Patrick DaVader · Answer 3 · 2015-04-10T14:32:37.937

53

As Parag's solution threw an error for me, here's my solution (combining David Hedlund's and Parag's):

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

This worked fine for me!

edited Apr 10 '15 at 14:32

answered Jun 07 '13 at 13:26

Patrick DaVader

2,133
4
24
35

score 37 · Answer 4 · answered Feb 16 '10 at 11:57

You'd have to bind the click event of the checkbox, as the change event doesn't work in IE.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

Now when you programmatically change the state, you have to trigger this event also:

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();

score 28 · Answer 5 · answered Jan 06 '14 at 11:51

//Check through class

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

//Check through name

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

//Check through data

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}

score 12 · Answer 6 · answered Sep 19 '15 at 13:25

12

Another way is to use prop (jQuery >= 1.6):

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});

answered Sep 19 '15 at 13:25

Saeb Amini

23,054
9
78
76

Indeed `.prop()` is much faster, and simply easier to type. – Marc.2377 Mar 02 '17 at 03:41

score 12 · Answer 7 · answered May 24 '17 at 09:10

12

The solution will be simple, As you just need 'listeners' when a certain radio button is checked. Do it :-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}

answered May 24 '17 at 09:10

Shah-Kodes

153
1
7

Thyagarajan C · Answer 8 · 2016-06-01T07:38:42.267

10

Working with all types of Radio Buttons and Browsers

if($('#radio_button_id')[0].checked) {
   alert("radiobutton checked")
}
else{
   alert("not checked");
}

Working Jsfiddle Here

edited Jun 01 '16 at 07:38

answered Jun 01 '16 at 07:24

Thyagarajan C

7,915
1
21
25

score 8 · Answer 9 · answered Sep 14 '13 at 12:08

8

... Thanks guys... all I needed was the 'value' of the checked radio button where each radio button in the set had a different id...

 var user_cat = $("input[name='user_cat']:checked").val();

works for me...

answered Sep 14 '13 at 12:08

Bill Warren

392
8
11

score 7 · Answer 10 · answered May 02 '13 at 07:49

If you don't want a click function use Jquery change function

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

This should be the answer that you are looking for. if you are using Jquery version above 1.9.1 try to use on as live function had been deprecated.

score 5 · Answer 11 · answered Jan 16 '21 at 04:43

ULTIMATE SOLUTION Detecting if a radio button has been checked using onChang method JQUERY > 3.6

         $('input[type=radio][name=YourRadioName]').change(()=>{
             alert("Hello"); });

Getting the value of the clicked radio button

 var radioval=$('input[type=radio][name=YourRadioName]:checked').val();

score 4 · Answer 12 · edited May 18 '16 at 08:36

4

dynamic generated Radio Button Check radio get value

$("input:radio[name=radiobuttonname:checked").val();

On change dynamic Radio button

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});

edited May 18 '16 at 08:36

Gandhi

11,875
4
39
63

answered May 18 '16 at 07:47

Dhaval Kariya

41
1

score 4 · Answer 13 · answered Jul 03 '17 at 14:19

4

$('.radio-button-class-name').is('checked') didn't work for me, but the next code worked well:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }

answered Jul 03 '17 at 14:19

Jokerius

1,310
1
14
22

1

Since your used it with a class instead of an ID, it would have returned a nodelist, instead of an element. `$('.radio-button-class-name').first().is(':checked')` should have worked. – Levi Feb 14 '19 at 10:01

score 4 · Answer 14 · answered Apr 30 '19 at 09:20

jQuery is still popular, but if you want to have no dependencies, see below. Short & clear function to find out if radio button is checked on ES-2015:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );

<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

When I tryed to run your code snippet here in stack overflow iIt seems not working as a test , could you edit it so we can easily try it .However It seems working on my project and very clear thank you very much. — Hicham O-Sfh, Dec 15 '20 at 00:34

score 3 · Answer 15 · answered Dec 30 '13 at 10:37

3

try this

    if($('input[name="radiobutton"]:checked').length == 0) {
        alert("Radio buttons are not checked");
    }

answered Dec 30 '13 at 10:37

Muhammad Aamir Ali

20,419
10
66
57

score 3 · Answer 16 · answered Jul 31 '20 at 09:04

This will work in all versions of jquery.

//-- Check if there's no checked radio button
if ($('#radio_button').is(':checked') === false ) {
  //-- if none, Do something here    
}

To activate some function when a certain radio button is checked.

// get it from your form or parent id
    if ($('#your_form').find('[name="radio_name"]').is(':checked') === false ) {
      $('#your_form').find('[name="radio_name"]').filter('[value=' + checked_value + ']').prop('checked', true);
    }

your html

$('document').ready(function() {
var checked_value = 'checked';
  if($("#your_form").find('[name="radio_name"]').is(":checked") === false) {
      $("#your_form")
        .find('[name="radio_name"]')
        .filter("[value=" + checked_value + "]")
        .prop("checked", true);
    }
  }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="your_form">
  <input id="user" name="radio_name" type="radio" value="checked">
        <label for="user">user</label>
  <input id="admin" name="radio_name" type="radio" value="not_this_one">
    <label for="admin">Admin</label>
</form>

score 2 · Answer 17 · edited Mar 01 '16 at 20:29

2

Try this:

alert($('#radiobutton')[0].checked)

edited Mar 01 '16 at 20:29

wpercy

9,636
4
33
45

answered Mar 01 '16 at 13:03

Nandha kumar

693
7
15

score -4 · Answer 18 · answered Aug 27 '16 at 05:27

-4

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

For versions of jQuery prior to 1.6, use:

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

answered Aug 27 '16 at 05:27

Jayendra Manek

148
14

2

This *sets* the value of the `checked` property, instead of querying it. – Marc.2377 Mar 02 '17 at 03:43

Find out whether radio button is checked with JQuery?

18 Answers18

Linked

Related