Skip to content

All topics  /  jQuery

How to Get Selected Radio Button Value in Jquery?

jQuery ·

When “How to Get Selected Radio Button Value in Jquery?” moves through design, development and browser testing, new hire orientation can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Dev,

Today, I will learn you how to get selected radio button value in jquery. You can simply use the jQuery :checked


selector in the val() method to find the value of the selected radio button.

I will give you three example of getting selected radio button value by class with click event in js. You will use "checked" attribute to getting selected radio button value.

Example 1 : 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <div class="card mt-5">
                    <div class="card-header bg-success">
                        <h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
                    </div>
                    <div class="card-body">
                        <form>				
                            <div class="form-group">
                                <label><strong>Select Your Hobby</strong>:-</label><br>
                                <label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
                            </div> 
                            <div class="form-group text-center">
                            	<button class="btn btn-success submit-btn" type="submit">Save</button>
                            </div>
                        </form>		
                    </div>
                </div>		
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.submit-btn').click(function () {
            var value = $('.radio-button:checked').val();
            alert(value);
        });
    </script>
</body>
</html>

Example 2 : 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <div class="card mt-5">
                    <div class="card-header bg-success">
                        <h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
                    </div>
                    <div class="card-body">
                        <form>				
                            <div class="form-group">
                                <label><strong>Select Your Hobby</strong>:-</label><br>
                                <label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
                            </div> 
                            <div class="form-group text-center">
                            	<button class="btn btn-success submit-btn" type="submit">Save</button>
                            </div>
                        </form>		
                    </div>
                </div>		
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.submit-btn').click(function () {
            var value = $('input[name="hobby"]:checked').val();
            alert(value);
        });
    </script>
</body>
</html>

Example 3 : 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <div class="card mt-5">
                    <div class="card-header bg-success">
                        <h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
                    </div>
                    <div class="card-body">
                        <form>				
                            <div class="form-group">
                                <label><strong>Select Your Hobby</strong>:-</label><br>
                                <label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
                                <label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
                            </div> 
                            <div class="form-group text-center">
                            	<button class="btn btn-success submit-btn" type="submit">Save</button>
                            </div>
                        </form>		
                    </div>
                </div>		
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.submit-btn').click(function () {
            var value = $('input[type="radio"]:checked').val();
            alert(value);
        });
    </script>
</body>
</html>

It will help you...

More on this topic