646

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?

2

18 Answers 18

1201
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
9
  • 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
    Commented Feb 16, 2010 at 11:50
  • 4
    This doesn't solve the "without the help of the click function", does it? Commented Feb 16, 2010 at 11:58
  • 6
    @Znarkus: OP appears satisfied. would you argue that you own use of ('#radio_button').click is without click? Commented Feb 16, 2010 at 12:05
  • 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
    Commented Nov 2, 2011 at 8:28
  • 2
    @zua: you're right! it even had a syntax error, the way it was before (unmatched brackets). fixed Commented Nov 2, 2011 at 11:53
179

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

2
  • 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
    Commented Jul 24, 2012 at 8: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
    Commented May 8, 2015 at 10:35
54

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!

38

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

//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         
}
0
13

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

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
1
  • Indeed .prop() is much faster, and simply easier to type.
    – Marc.2377
    Commented Mar 2, 2017 at 3:41
13

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

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

0
7

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.

6

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();
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{}});
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
    }
1
  • 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
    Commented Feb 14, 2019 at 10:01
4

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>

1
  • 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. Commented Dec 15, 2020 at 0:34
3

try this

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

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>

2

Try this:

alert($('#radiobutton')[0].checked)
0
-4
$("#radio_1").prop("checked", true);

For versions of jQuery prior to 1.6, use:

$("#radio_1").attr('checked', 'checked');
1
  • 2
    This sets the value of the checked property, instead of querying it.
    – Marc.2377
    Commented Mar 2, 2017 at 3:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.