How to Create a Select All Checkbox in JavaScript ?

Last Updated : 16 Apr, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In web apps with lots of checkboxes, a "Select All" checkbox is useful. It lets users check or uncheck all checkboxes at once, making things quicker. This feature can be implemented in various ways, such as utilizing JavaScript and JQuery to incorporate a "Select All" checkbox. This enhances the application's usability and speed, making it more user-friendly.

Below are the methods to create a select all checkbox in JavaScript:

Table of Content

Using Vanilla JavaScript

In this approach, create a webpage with checkboxes and a "Select All" checkbox using HTML and CSS. When the "Select All" checkbox is checked or unchecked, it toggles the selection status of all other checkboxes on the page using JavaScript.

Example: The below example shows a "Select All" checkbox feature using JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Select All Checkbox</title>
    <style>
        .d1 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        .options_box {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <input type="checkbox" 
               id="selectAllCheckbox"> 
              Select All
        <br>
        <div class="options_box">
            <input type="checkbox" class="checkboxes"> 
                      Checkbox 1
            <input type="checkbox" class="checkboxes"> 
                      Checkbox 2
            <input type="checkbox" class="checkboxes"> 
                      Checkbox 3
            <input type="checkbox" class="checkboxes"> 
                      Checkbox 4
        </div>
    </div>
    <script>
        document.getElementById('selectAllCheckbox')
                  .addEventListener('change', function () {
            let checkboxes = 
                document.querySelectorAll('.checkboxes');
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = this.checked;
            }, this);
        });
    </script>
</body>

</html>

Output:

Untitled-design-(1)
Output

Using the jQuery Library

In this approach, When the "Select All" checkbox is toggled, it updates the selection status of all other checkboxes on the page using jQuery, allowing users to easily select or deselect all checkboxes at once. This improves user experience by providing a convenient way to manage checkbox selections

Example: This example demonstrates a "Select All" checkbox feature using jQuery for streamlined management of multiple selections.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Select All Checkbox</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
      </script>
    <style>
        .d1 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        .options_box {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <input type="checkbox" id="selectAllCheckbox"> 
                  Select All
        <br>
        <div class="options_box">
            <input type="checkbox" class="checkboxes"> 
                  Checkbox 1
            <input type="checkbox" class="checkboxes"> 
                  Checkbox 2
            <input type="checkbox" class="checkboxes"> 
                  Checkbox 3
            <input type="checkbox" class="checkboxes"> 
                  Checkbox 4
        </div>
    </div>
    <script>
        $('#selectAllCheckbox').change(function () {
            $('.checkboxes').prop('checked', $(this).prop('checked'));
        });
    </script>
</body>

</html>

Output:

Untitled-design-(1)
Output

Next Article
How to get all checked values of checkbox in JavaScript ?

H
heysaiyad
Improve
Article Tags :

Similar Reads