The below code snippet explains how to get the value of the checked HTML input radio button using its Name attribute in jQuery
<input type = "button" id = "demo" value = "Demo" />
<label for="Apple"><input type="radio" id="Apple" name="fruits" value="1" checked = "checked" />Apple</label>
<label for="Banana"><input type="radio" id="Banana" name="fruits" value="2" />Banana</label>
<label for="Mango"><input type="radio" id="Mango" name="fruits" value="3" />Mango</label>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$("#demo").live("click", function () {
var value = $("input:radio[name=fruits]:checked").val();
alert(value);
});
</script>
Explanation
In the above example a click event handler has been bind to an HTML Input Button with the ID demo. When the button is clicked it gets the value of the checked or selected HTML input radio button using the jQuery selector input:radio[name=fruits]:checked.
Now let’s break up the selector to understand it better.
input - Tells the compiler that it’s an element with Tag Name input
input:radio[name=fruits]- Tells the compiler that it’s an HTML input radio button with name “fruits”.
input:radio[name=fruits]:checked. - Tells the compiler that it’s an HTML input radio button with name “fruits” and is checked. Note: If there’s no radio button that is selected or checked then it will display alert as “undefined”.