How to detect radio box change with jQuery

Written by Tony Lea on Apr 4th, 2012 ・ Views ・ Report Post

Tony Lea Visit User Profile
Table of contents

I'm constantly finding myself searching Google when I need to find out how to detect when a radio box has been changed using jQuery, and sometimes I have to search down a couple results til I finally find one that works. So, since this may come up again in the future, I have just decided to write a quick post about this topic.

Finding out when the radio box has been changed with jQuery is very easy, say you have a form inside your html that looks like this:

<form id="my_radio_box">
    <input type="radio" name="my_options" value="option 1"> Option 1
    <input type="radio" name="my_options" value="option 2"> Option 2
    <input type="radio" name="my_options" value="option 3"> Option 3
</form>

Now, to detect when that radio box is changed, you can easily call the jQuery 'change' event inside your jQuery document ready function:

$(document).ready(function(){
        $('#my_radio_box').change(function(){
            alert('Radio Box has been changed!');
        });
    });

In the above example when the radio box has been changed an alert is displayed. Now, in order to get the value of the currently selected radio box we can simply save the value in a variable:

selected_value = $("input[name='my_options']:checked").val();

And, of course this has to be called inside of the jQuery 'change' function. Quick note: you'll need to make sure to include the jQuery library somewhere above this code. So far the whole javascript functionality should look as follows:

$(document).ready(function(){
        $('#my_radio_box').change(function(){
            selected_value = $("input[name='my_options']:checked").val();
        });
    });

There you go the selected value is stored inside of the 'selected_value' variable, you can feel free to do whatever you'd like from here. As an example, I'm going to alert the value to the screen.

Checkout The Simple Demo Here

And the following is the code for the example above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			<script type="text/javascript">
			
				$(document).ready(function(){
				
					$('#my_radio_box').change(function(){
						selected_value = $("input[name='my_options']:checked").val();
			            alert(selected_value);
			        });
				
				});
			
			</script>
	</head>
	<body>

		<h2>Detecting a Radio Box Change and getting the Value in jQuery:</h2>	
		<form id="my_radio_box">
		    <input type="radio" name="my_options" value="option 1" checked="checked" /> Option 1
		    <input type="radio" name="my_options" value="option 2" /> Option 2
		    <input type="radio" name="my_options" value="option 3" /> Option 3
		</form>
	
	</body>
</html>

Comments (0)