Menu Close

Get the value of selected radio button in a group using jQuery


Here, we will use the combination of the value() method and :checked selector method to find the value of the selected radio button in the group of elements. Follow the below example.


<!DOCTYPE html>
    <title>Jquery get value of radio button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="style.css">
    <script src=""></script>
        <div class="container">
            <h2>Select your product.</h2>
            <label><input type="radio" name="product" value="1"> Product 1</label> 
            <label><input type="radio" name="product" value="2"> Product 2</label> 
            <label><input type="radio" name="product" value="3"> Product 3</label>
            <p><input type="button" value="Get The Value"></p>
        	var radioVal = $("input[name='product']:checked").val();
                alert("Product - " + radioVal);

Add the below stylesheet to the html file for better responsive design.

body {
    margin: 50px;
    font-family: Arial, Helvetica, sans-serif;
label{padding-top: 20px;} 
Posted in CSS, HTML, jQuery

You can also read...