Check and Uncheck all checkboxes by one checkbox is very important and common functionality in website development. Here we show you how you can checked and unchecked all checkboxes.
The code below will demonstrate Check and Uncheck All checkboxes by single checkbox.
<html>
<head>
<title></title>
</head>
<body>
<h3 align="center" style="margin-top: 20px;"> Check Uncheck All Checkboxes in Html Using JavaScript</h3>
<table border="1" align="center" cellpadding="5" cellspacing="1">
<tr bgcolor="#ABB">
<td><input type="checkbox" name="all" id = "all" onClick="checkUncheckAll()"></td>
<td>Language</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="PHP"></td>
<td>PHP</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="JAVA"></td>
<td>JAVA</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="C"></td>
<td>C</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="C++"></td>
<td>C++</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="COBOL"></td>
<td>COBOL</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="PYTHON"></td>
<td>PYTHON</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="C#"></td>
<td>C#</td>
</tr>
<tr>
<td><input type="checkbox" name="lang" value="SQL"></td>
<td>SQL</td>
</tr>
</table>
</body>
</html>
In Above Code element id all call onclick event checkUncheckAll () javascript method.
Where we check
If Id all element is checked true than get name lang elements and put checked true in the lang elements.
Else Id all element is checked true than get name lang elements and put checked false in the lang elements.
I hope this article helps you.
Thanks for visiting Inflay.com .