Toggle Select All Checkbox JavaScript

A very Simple pure JavaScript function to check all check fields. It loop through all input with type checkbox and apply checked attribute if select all checkbox checked. This JavaScript code snippet helps you to create toggle select all checkbox functionality.

How to Create Toggle Select all Checkbox in JavaScript

1. First of all, create the HTML structure as follows:

 <h3>Check All  - Javascript</h3>
<div class="container">
<input type="checkbox" id="cc" onclick="javascript:checkAll(this)"/>
<label for="cc">Check All</label>
<br /><br />
<input type="checkbox" id="c1" />
<label for="c1">Checkbox 1</label>
<br />
<input type="checkbox" id="c2" />
<label for="c1">Checkbox 2</label>
<br />
<input type="checkbox" id="c3" />
<label for="c1">Checkbox 3</label>
<br />
<input type="checkbox" id="c4" />
<label for="c1">Checkbox 4</label>
<br />
<input type="checkbox" id="c5" />
<label for="c1">Checkbox 5</label>
<br />  
 </div>

2. After that, add the following CSS styles to your project:

body {
  font-family: segoe ui;
}
.container{
    user-select: none;
}

3. Finally, add the following JavaScript code and done.

function checkAll(o) {
  var boxes = document.getElementsByTagName("input");
  for (var x = 0; x < boxes.length; x++) {
    var obj = boxes[x];
    if (obj.type == "checkbox") {
      if (obj.name != "check")
        obj.checked = o.checked;
    }
  }
}

That’s all! hopefully, you have successfully integrated this toggle select all checkbox code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.