Check and uncheck all checkboxes using jQuery

  • Post category:JavaScript
  • Reading time:6 mins read

Today, in this short article we’ll share with you a simple code to check and uncheck all checkboxes using jQuery. In this article we will create a simple HTML form and try to implement checkboxes for select/deselect demo.

Checkout more articles on JavaScript

Steps to select or deselect all checkboxes

  1. Create an HTML form
  2. Include jQuery library
  3. Add script for select/deselect functionality
  4. Output

1. Create an HTML form

Let’s create an HTML form where we will have multiple checkboxes that can be controlled by the Select All checkbox.

<form method="post" action="">
  <h3>Select or Deselect all Checkboxes using jQuery - <a href="https://codepremix.com" target="_blank" rel="noopener noreferrer">Code Premix</a></h3>
  <label><input type="checkbox" id="checkAll" /> Select All</label><br /><br />
  <label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br />
  <label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br />
  <label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br />
  <label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br />
  <label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label>
</form>

Here, we have added the master checkbox with id checkAll to select or deselect all checkboxes and added the other checkboxes with class chk.

2. Include jQuery library

In the next step, we need to include the following jQuery library in the head section.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

3. Add script for select/deselect functionality

We’ll use the .prop() method to toggle the checkbox on the click of the Select All checkbox to select / deselect all checkboxes.

<script>
  $(document).ready(function () {
    $("#checkAll").change(function () {
      $("input:checkbox").prop('checked', $(this).prop("checked"));
    });
  });
</script>

After selecting the all the checkbox, the user deselects any of the checkboxes, the master checkbox should be deselected. Similarly, if master checkbox deselect and user select all checkbox one by one then the master checkbox will be selected.

To do this, when the checkbox with class ‘chk’ is clicked, we will check the length of the selected checkbox with class chk and total checkbox with class chk. If both are the same then the master checkbox with id checkAll will be selected otherwise deselected.

<script>
  $(document).ready(function () {
    ...
    ...
    $('.chk').on('click', function () {
      if ($('.chk:checked').length == $('.chk').length) {
        $('#checkAll').prop('checked', true);
      } else {
        $('#checkAll').prop('checked', false);
      }
    });
  });
</script>

4. Output

At the last, combine the all above code and run the page in the browser.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Select or Deselect all Checkboxes using jQuery - Code Premix</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    form {
      margin: 20px;
    }
  </style>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

  <script>
    $(document).ready(function () {
      $("#checkAll").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
      });
      $('.chk').on('click', function () {
        if ($('.chk:checked').length == $('.chk').length) {
          $('#checkAll').prop('checked', true);
        } else {
          $('#checkAll').prop('checked', false);
        }
      });
    });
  </script>
</head>

<body>
  <form method="post" action="">
    <h3>Check and uncheck all checkboxes using jQuery - <a href="https://codepremix.com" target="_blank"
        rel="noopener noreferrer">Code Premix</a></h3>
    <label><input type="checkbox" id="checkAll" /> Select All</label><br /><br />
    <label><input class="chk" type="checkbox" name=item[] value="1" /> Item 1</label><br />
    <label><input class="chk" type="checkbox" name=item[] value="2" /> Item 2</label><br />
    <label><input class="chk" type="checkbox" name=item[] value="3" /> Item 3</label><br />
    <label><input class="chk" type="checkbox" name=item[] value="4" /> Item 4</label><br />
    <label><input class="chk" type="checkbox" name=item[] value="5" /> Item 5</label>
  </form>
</body>

</html>

I hope you find this article helpful.
Thank you for reading. Happy Coding..!!

Tags:

Leave a Reply