jQuery

Get The Values of Selected Checkboxes in a group using jQuery

In this blog we will learn, how to Get The Values of Selected Checkboxes in a group using jQuery.

Get The Values of Selected Checkboxes in a group using jQuery

If you want to get checked checkboxes from a particular checkbox group, depending on your choice which button you have clicked, you can use $(‘input[name=”hobbies”]:checked’) or $(‘input[name=”country”]:checked’). This will sure that the checked checkboxes from only the hobbies or country checkbox group are selected.

get-values-of-selected-checkboxes-group-using-jquery

We can use here The each() function for iterates over all the checkboxes that are checked.
Key Point :
Add this jQuery link in head section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#btnSelectedHobbies').click(function () {
                debugger;
                var result = $('input[name="hobbies"]:checked');
                if (result.length > 0) {
                    var hobbies = result.length + " Hobbies is Selected <br/>";
                  //The each() function used here for iterates over all the checkboxes that are checked from 
                  //hobbies group.
                    result.each(function () {
                        hobbies += $(this).val() + "<br/>";

                    })
                    $('#divSelectedHobbies').html(hobbies);
                }
                else {
                    $('#divSelectedHobbies').html("Please Select hobbies");

                }
            })
            $('#btnSelectedCountry').click(function () {
                var country = $('input[name="country"]:checked');
                if (country.length > 0) {
                    var CountryData = country.length + " Country is Selected <br/> ";

                 //The each() function used here for iterates over all the checkboxes that are checked from 
                  //country group.
                    country.each(function () {
                        CountryData += $(this).val() + "<br/>";
                    })
                    $('#divSelectedCountry').html(CountryData);
                }
                else {
                    $('#divSelectedCountry').html("please select Country ");
                }

            })
        })
    </script>
</head>
<body>
    Select Hobbies:
    <input type="checkbox" name="hobbies" value="Swimming" />Swimming
    <input type="checkbox" name="hobbies" value="Singing" />Singing
    <input type="checkbox" name="hobbies" value="Coding" />Coding
    <input type="checkbox" name="hobbies" value="Travelling" />Travelling
    <br /><br />
    Select Country:
    <input type="checkbox" name="country" value="India" />India
    <input type="checkbox" name="country" value="US" />US
    <input type="checkbox" name="country" value="Sri Lanka" />Sri Lanka
    <input type="checkbox" name="country" value="England" />England
    <br /><br />
    <input type="submit" id="btnSelectedHobbies" value="Get Selected Hobbies" />
    <input type="submit" id="btnSelectedCountry" value="Get Selected Country" />

    <br /><br />
    <div id="divSelectedHobbies"></div>
    <br /><br />
    <div id="divSelectedCountry"></div>
</body>
</html>

Result :
get-values-of-selected-checkboxes-group-using-jquery-1

get-values-of-selected-checkboxes-group-using-jquery

Any Question and suggestion related to this article please comment me, Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *