Check And Unchecked All Checkbox Using Javascript

Submitted by argie on Friday, February 28, 2014 - 14:03.

This tutorial will help you on how to check and unchecked all checkbox in your form using javascript. This tutorial will be helpful to thus programmer who are developing a system that involves many checkbox with check and unchecked function. This feature is very useful also for user because they don't have to check the checkbox one by one. Follow the steps bellow to understand more in this tutorial.

Step 1: Creating our Javascript that check and unchecked all the checkbox in our form

Copy the code bellow and save it as "index.html"

<html>
<head>
<script type="text/javascript">
function checkAll(checkEm) {
    var cbs = document.getElementsByTagName('input');
    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].type == 'checkbox') {
            if (cbs[i].name == 'menu[]') {
                cbs[i].checked = checkEm;
            }
        }
    }
}
</script>
</head>
<body>
 
</body>
</html>

Step 2: Creating our form that display the checkbox

The code bellow will give us the checkbox display and our check all and unchecked all button. Copy the code bellow and paste it between the body tag in our "index.html".

<form action="" method="post">
<input type="checkbox" name="menu[]" value="menu1" style="width: 16px;">Menu 1<br>
<input type="checkbox" name="menu[]" value="menu2" style="width: 16px;">Menu 2<br>
<input type="checkbox" name="menu[]" value="menu3" style="width: 16px;">Menu 3<br>
<input type="checkbox" name="menu[]" value="menu4" style="width: 16px;">Menu 4<br>
<input type="button" class="my_form-check-button" onClick="checkAll(true);" value="Check All"/>
<input type="button" class="my_form-check-button" onClick="checkAll(false);" value="Clear All"/>
</form>

That's it you've been successfully created the code that allows you to check and unchecked all the checkbox.

Add new comment

31 views