Get radio button value in jQuery

By  | In ,

Get radio button value in jquery
When using radio buttons in web application we need to get value of radio buttons at clientside. We can use jQuery to get radio button value in jQuery.

Code that shows how to get radio button value in jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get radio button value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
var number = $("input[@name=numbers]:checked").val();
alert(number);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="radio" name="numbers" value="0" checked="checked" style="display:none" /> 
<input type="radio" name="numbers" value="1" /> 
<input type="radio" name="numbers" value="2" /> 
<input type="radio" name="numbers" value="3" /> 
<input id="submit" type="button" value="Submit"/>
</div>
</form>
</body>
</html>

Output

2 comments :

  1. logiwebApril 25, 2012 at 11:27 PM

    hi,

    thanks for coding tip. but I've noticed something.
    If you add a new radio group the value stays the one of the first group or perhaps i do something wrong
    var number = $("input[@name=numbers]:checked").val();
    alert(number);
    var number2 = $("input[@name=numbers2]:checked").val();
    alert(number2);

    ReplyDelete
  2. UnknownAugust 27, 2012 at 12:58 PM

    I get the same behaviour... i.e. only works on the first radio button group. Any idea how to get the second button group?

    ReplyDelete