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?

related Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/… — Adri w Ukraine
– Adri w Ukraine, Commented Jul 7, 2014 at 11:55

David Hedlund · Accepted Answer · 2011-11-02 11:52:01Z

1206

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

edited Nov 2, 2011 at 11:52

answered Feb 16, 2010 at 11:38

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Markus Hedlund Over a year ago

This doesn't solve the "without the help of the click function", does it?

David Hedlund Over a year ago

@Znarkus: OP appears satisfied. would you argue that you own use of ('#radio_button').click is without click?

Markus Hedlund Over a year ago

I thought he was refering to his click function. If OP has tested your solution and it works for him, all is good :)

zuallauz Over a year ago

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

David Hedlund Over a year ago

@zua: you're right! it even had a syntax error, the way it was before (unmatched brackets). fixed

|

Tehsmeely · Accepted Answer · 2015-08-30 14:50:39Z

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

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.
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()) {

Patrick DaVader · Accepted Answer · 2015-04-10 14:32:37Z

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!

Markus Hedlund · Accepted Answer · 2010-02-16 11:57:29Z

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

Nanhe Kumar · Accepted Answer · 2014-01-06 11:51:14Z

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

Saeb Amini · Accepted Answer · 2015-09-19 13:25:56Z

13

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

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

answered Sep 19, 2015 at 13:25

Saeb Amini

24.6k10 gold badges85 silver badges78 bronze badges

1 Comment

Marc.2377 Over a year ago

Indeed .prop() is much faster, and simply easier to type.

Shah-Kodes · Accepted Answer · 2017-05-24 09:10:15Z

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

Thyagarajan C · Accepted Answer · 2016-06-01 07:38:42Z

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

Bill Warren · Accepted Answer · 2013-09-14 12:08:53Z

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

iCezz · Accepted Answer · 2013-05-02 07:49:13Z

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.

Obot Ernest · Accepted Answer · 2021-01-16 04:43:44Z

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

Gandhi · Accepted Answer · 2016-05-18 08:36:33Z

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

Jokerius · Accepted Answer · 2017-07-03 14:19:06Z

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 3, 2017 at 14:19

Jokerius

1,3201 gold badge14 silver badges22 bronze badges

1 Comment

Levi Over a year ago

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.

MaxWall · Accepted Answer · 2019-04-30 09:20:33Z

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.

designdust · Accepted Answer · 2020-07-31 09:04:46Z

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>

Muhammad Aamir Ali · Accepted Answer · 2013-12-30 10:37:52Z

try this

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

wpercy · Accepted Answer · 2016-03-01 20:29:42Z

2

Try this:

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

edited Mar 1, 2016 at 20:29

wpercy

10.2k4 gold badges35 silver badges50 bronze badges

answered Mar 1, 2016 at 13:03

Nandha kumar

7938 silver badges15 bronze badges

Comments

Jayendra Manek · Accepted Answer · 2016-08-27 05:27:28Z

-4

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

For versions of jQuery prior to 1.6, use:

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

answered Aug 27, 2016 at 5:27

Jayendra Manek

14814 bronze badges

1 Comment

Marc.2377 Over a year ago

This sets the value of the checked property, instead of querying it.

Collectives™ on Stack Overflow

Find out whether radio button is checked with JQuery?

18 Answers 18

6 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

6 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Related