Check and Uncheck All in HTML

In this article I will tell you about how to check and uncheck all checkboxes in HTML
  • 2480

Introduction

In this article we will learn about how to check and uncheck all checkboxes in HTML. Suppose you have multiple checkboxes on a form. You can use the following code snippets to implement check all or uncheck all tags.

Example

<html> 

<head>

<script language="JavaScript">

<!--    Begin

    var checkflag = "false";

    function check(field) {

        if (checkflag == "false") {

            for (i = 0; i < field.length; i++) {

                field[i].checked = true;

            }

            checkflag = "true";

            return "Uncheck All";

        }

        else {

            for (i = 0; i < field.length; i++) {

                field[i].checked = false;

            }

            checkflag = "false";

            return "Check All";

        }

    }

//  End -->

</script>

</head>

<body>

<center>

<form name=myform action="" method=post>

<table>

<tr><td>

<b>Your Favorite Scripts & Languages</b><br>

<input type=checkbox name=list value="1">Java<br>

<input type=checkbox name=list value="2">JavaScript<br>

<input type=checkbox name=list value="3">ASP<br>

<br>                                                   

<input type=button value="Check All" onClick="this.value=check(this.form.list)">

</td></tr>

</table>

</form>

</center>

<font face="Tahoma"><a target="_blank" href="http://www.dotnetheaven.com/category/html"><span style="font-size: 8pt; text-decoration: none">HTML Tutorials</span></a></font>

</body> 

</html>

 

Output:

You will see following output:

CheckBox01.jpg

Now click on button CheckAll to check all the checkbox.

CheckBox02.jpg

Now click on UncheckAll to uncheck all the checkbox.

CheckBox03.jpg

© 2019 DotNetHeaven. All rights reserved.