Home Javascript How to Get Selected Radio Button Value in Jquery?

How to Get Selected Radio Button Value in Jquery?

by Shahriar Sagor
Selected Radio Button Value in Jquery

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. Here i will show How to Get Selected Radio Button Value in Jquery ?

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

close

You may also like