Select All Checkboxes Using JavaScript

Select All Checkboxes Using JavaScript

by

When you have a list of checkboxes and select all option in a form then you must have to implement check uncheck all checkbox on click of select all
checkbox.

In this tutorial, we are going to see how to select all Checkboxes using JavaScript.

Here I am going to create a simple JavaScript function to accomplish this task easily.

The HTML

<input type="checkbox" onClick="checkAll(this)" />Select All <br>

<input type="checkbox" class="chk" name="color" value="red" />Red <br>
<input type="checkbox" class="chk" name="color" value="blue" />Blue <br>
<input type="checkbox" class="chk" name="color" value="green" />Green  <br>
<input type="checkbox" class="chk" name="color" value="black" />Black  <br>

The JavaScript

<script language="JavaScript">
function checkAll(source) {
    checkboxes = document.getElementsByClassName('chk');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
}
</script>

Hope you guys understood how to Select/Unselect all CheckBoxes with JavaScript.

If you have any query feel free to write in the comment box.

Leave a Comment