Get/Set Multiple Checkbox Values Using jQuery

In this article, we will learn how we can set and get multiple checkboxes values using jQuery.

Prerequisites:

Basic knowledge of JavaScript

You can use the following code for performing the functionality.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-1 ">
                <label class="control-label">Hobbies </label>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="form-check">
                    <input type="checkbox" id="chk1" class="form-check-input" value="Games" />&nbsp;Games &nbsp;
                    &nbsp; &nbsp;
                    <input type="checkbox" id="chk2" class="form-check-input" value="Reading" />&nbsp;Reading &nbsp;
                    &nbsp; &nbsp;
                    <input type="checkbox" id="chk3" class="form-check-input" value="Music" /> &nbsp;Music &nbsp;
                    &nbsp;
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 ">
                <button type="button" class="btn btn-primary" id="btnSet" value="SET">SET</button>
            </div>
            <div class="col-sm-2 ">
                <button type="button" class="btn btn-info" id="btnGet" value="GET">GET</button>
            </div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function () {
        var setCheckBoxValue = '';
        $(document).on("click", "#btnSet", function () {
            var hobbiesData = ["Games","Music"]
            $('.form-check-input[type="checkbox"]').map(function () { 
                hobbiesData.includes($(this).val()) ? $(this).prop('checked', true) : $(this).prop('checked', false) 
            });
        });

        $(document).on("click", "#btnGet", function () {
            setCheckBoxValue = $('.form-check-input[type="checkbox"]:checked').map(function () {
                return $(this).val()
            }).get().join(',');
            alert(setCheckBoxValue);
        });
    });
</script>
</html>

OUTPUT

I hope you guys understand how we can do that.

Let me know if you face any difficulties.

Nayan Raval

Nayan Raval is a MEAN Stack .Net Developer has extensive experience with designing and developing enterprise-scale applications. Key Areas Of Expertise: • ASP.NET Core MVC • ASP.NET Core Web API • C# • ASP.NET MVC 5 • Angular All versions • HTML5 • CSS3 / SCSS • Bootstrap • JavaScript • Azure • JQuery Databases and related • Microsoft SQL server MSSQL • PostgreSQL • Entity Framework (EF) • LINQ UI Frameworks • Kendo UI • Telerik • JQuery UI • Prime NG and Material UI API Integration • SignalR • DateDog • Twilio Voice Call And Message • Stripe • SendGrid (Email Camping) • Checkr • Zoom Video Call • Auth0 • Elastic Search • Quartz - Scheduler • JWT Token • Google Calendar