How to Create a Select All Checkbox in JavaScript ?

Last Updated : 16 Apr, 2024

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
Using the jQuery Library

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:

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:

Proper way to use Server Component Inside a Client Component in Next.js

heysaiyad

Improve

Article Tags :

How to Create a Select All Checkbox in JavaScript ?

Using Vanilla JavaScript

Using the jQuery Library

Similar Reads

Thank You!

What kind of Experience do you want to share?