<\/span><\/h2>\n\n\n\nSometimes, you may have multiple radio button groups on a single HTML form. Let us say you have the following HTML radio button groups.<\/p>\n\n\n\n
<form id='my_form'>
<fieldset>
<legend>Choose radioName<\/legend>
<label><input id=\"option1\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"1\" \/> 1<\/label> <br \/>
<label><input id=\"option2\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"2\" \/> 2<\/label> <br \/>
<label><input id=\"option3\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"3\" \/> 3<\/label> <br \/>
<\/fieldset>
<fieldset>
<legend>Choose radioName2<\/legend>
<label><input id=\"option12\" class=\"radio_button2\" type=\"radio\" name=\"radio_name2\" value=\"a\" \/> a<\/label> <br \/>
<label><input id=\"option22\" class=\"radio_button2\" type=\"radio\" name=\"radio_name2\" value=\"b\" \/> b<\/label> <br \/>
<label><input id=\"option32\" class=\"radio_button2\" type=\"radio\" name=\"radio_name2\" value=\"c\" \/> c<\/label> <br \/>
<\/fieldset>
<\/form><\/pre>\n\n\n\nThere are several ways to retrieve the values of each radio button group. In each case, you will need to get them separately. Here is an example to get the checked radio button values, using <\/p>\n\n\n\n
var myRadio1 = $('input[name=radio_name]').filter(':checked').val();
var myRadio2 = $('input[name=radio_name2]').filter(':checked').val();
console.log(myRadio1, myRadio2);<\/pre>\n\n\n\nYou can also use class attributes to select the radio button groups, as long as they are different for each radio button group.<\/p>\n\n\n\n
var myRadio1 = $('.radio_button').filter(':checked').val();
var myRadio2 = $('.radio_button2').filter(':checked').val();
console.log(myRadio1, myRadio2);<\/pre>\n\n\n\nThis is a more efficient solution that looping through all radio buttons, or radio button groups.<\/p>\n\n\n\n
Please remember to include jQuery library for the above code to work. Here is a sample complete code for your reference.<\/p>\n\n\n\n
<html>
<head>
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>
<\/head>
<body>
<form id='my_form'>
<fieldset>
<legend>Choose radioName<\/legend>
<label><input id=\"option1\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"1\" \/> 1<\/label> <br \/>
<label><input id=\"option2\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"2\" \/> 2<\/label> <br \/>
<label><input id=\"option3\" class=\"radio_button\" type=\"radio\" name=\"radio_name\" value=\"3\" \/> 3<\/label> <br \/>
<\/fieldset>
<\/form>
<script type='text\/javascript'>
$('#my_form fieldset label input').on('change', function() {
alert($('input[name=radio_name]:checked').val());
});
<\/script><\/pre>\n\n\n\n