Retrieve selected Radio button and checkbox value using JQuery

Introduction
In this article i will show you, how to get the value of radio button and checkbox using JQuery. First of all in this article i will get the control after then check the selected control. If selected then retrieve the value of it. Let take a simple example
Description
In previous article i explained TextBox example in JQuery, Accept only numbers JQuery Validation. So lots of example cover in JQuery.


Source code for Radio Button

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radioandcheck.aspx.cs" Inherits="radioandcheck" %>

<!DOCTYPE html>
<html>
<head>

<title>jQuery Get Selected Radio Button Value</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#getv").click(function () {
            var radioValue = $("input[name='gender']:checked").val();
            if (radioValue) {
                alert("Your are a - " + radioValue);
            }
        });

    });
</script>
</head>
<body>    <form id="form1" runat="server">
    <h4>Please select your gender.</h4>
    <p>
       <input type="radio" name="gender" value="male">Male
        <input type="radio" name="gender" value="female">Female
    </p>
    <p><input type="button" value="Get Value" id="getv"></p>
    </form>
</body>
</html>

Code Generate the following output

Retrieve selected Radio button  value using JQuery

Source code for checkbox

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radioandcheck.aspx.cs" Inherits="radioandcheck" %>

<!DOCTYPE html>
<html>
<head>

<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#getv").click(function () {
            var radioValue = $("input[name='gender']:checked").val();
            if (radioValue) {
                alert("Your are a - " + radioValue);
            }
        });

    });
</script>
</head>
<body>    <form id="form1" runat="server">
    <h4>Please select your gender.</h4>
    <p>
       <input type="radio" name="gender" value="male">Male
        <input type="radio" name="gender" value="female">Female
    </p>
    <p><input type="button" value="Get Value" id="getv"></p>
    </form>
</body>
</html>
Code Generate the following output

Retrieve selected checkbox value using JQuery

Retrieve selected Radio button and checkbox value using JQuery Retrieve selected Radio button and checkbox value using JQuery Reviewed by Jacob Lefore on September 06, 2015 Rating: 5

No comments