How to Get Selected Radio Button Value in Jquery?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this example, I will show you how to get selected radio button value by using jquery. For this you can simply use the jQuery :checked selector for the val() method to find the value of the selected radio button.

Now here I will give you three best example of getting selected radio button value by using class with click event in js. So here 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>

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →