Select All, Un Select All,Invert Selection in HTML Javascript.
using getElementsByTagName
Step 1) Add check boxes to html page
<input type='checkbox' value= 'C' >>C</input><input type='checkbox' value= 'C++' >>C#</input>
<input type='checkbox' value= 'JAVA' >>JAVA</input>
<input type='checkbox' value= 'C#' >>C#</input>
<input type='checkbox' value= 'Vb.NET' >>VB.NET</input>
<input type='checkbox' value= 'PHP ' >>PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' >>UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' >>PERL Programming</input>
<input type='checkbox' value= 'Javascript ' >>Javascript</input>
<input type='checkbox' value= 'VB Script ' >>Vb Script</input>
<input type='checkbox' value= 'Power Shell ' >>Power Shell</input><br />
Step 2) Add 3 anchor tags for Select All,Un select All,Invert Selection.
<a href="javascript:SelectALL(true)">Select ALL</a>
<a href="javascript:SelectALL(false)">Select None</a>
<a href="javascript:SelectALL(null)">Invert Selection</a>
<a href="javascript:SelectALL(null)">Invert Selection</a>
Step 3) Add script for SelectALL method
{
var eleNodelist = document.getElementsByTagName("input");
for (i = 0; i < eleNodelist.length; i++) {
if (eleNodelist[i].type == 'checkbox')
if (status == null) {
eleNodelist[i].checked = !eleNodelist[i].checked;
}
else eleNodelist[i].checked = status;
}
}
Complete Source Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type='checkbox' value= 'C' >>C</input>
<input type='checkbox' value= 'C++' >>C#</input>
<input type='checkbox' value= 'JAVA' >>JAVA</input>
<input type='checkbox' value= 'C#' >>C#</input>
<input type='checkbox' value= 'Vb.NET' >>VB.NET</input>
<input type='checkbox' value= 'PHP ' >>PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' >>UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' >>PERL Programming</input>
<input type='checkbox' value= 'Javascript ' >>Javascript</input>
<input type='checkbox' value= 'VB Script ' >>Vb Script</input>
<input type='checkbox' value= 'Power Shell ' >>Power Shell</input><br />
<a href="javascript:SelectALL(true)">Select ALL</a> <a href="javascript:SelectALL(false)">Select None</a>
<a href="javascript:SelectALL(null)">Invert Selection</a>
<script type="text/javascript">
function SelectALL(status)
{
var eleNodelist = document.getElementsByTagName("input");
for (i = 0; i < eleNodelist.length; i++) {
if (eleNodelist[i].type == 'checkbox')
if (status == null) {
eleNodelist[i].checked = !eleNodelist[i].checked;
}
else eleNodelist[i].checked = status;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type='checkbox' value= 'C' >>C</input>
<input type='checkbox' value= 'C++' >>C#</input>
<input type='checkbox' value= 'JAVA' >>JAVA</input>
<input type='checkbox' value= 'C#' >>C#</input>
<input type='checkbox' value= 'Vb.NET' >>VB.NET</input>
<input type='checkbox' value= 'PHP ' >>PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' >>UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' >>PERL Programming</input>
<input type='checkbox' value= 'Javascript ' >>Javascript</input>
<input type='checkbox' value= 'VB Script ' >>Vb Script</input>
<input type='checkbox' value= 'Power Shell ' >>Power Shell</input><br />
<a href="javascript:SelectALL(true)">Select ALL</a> <a href="javascript:SelectALL(false)">Select None</a>
<a href="javascript:SelectALL(null)">Invert Selection</a>
<script type="text/javascript">
function SelectALL(status)
{
var eleNodelist = document.getElementsByTagName("input");
for (i = 0; i < eleNodelist.length; i++) {
if (eleNodelist[i].type == 'checkbox')
if (status == null) {
eleNodelist[i].checked = !eleNodelist[i].checked;
}
else eleNodelist[i].checked = status;
}
}
</script>
</body>
</html>
Tags:Javascript getElementsByTagName ,html checkbox, multiple
checkbox in HTML Page,document.getElementsByTagName ,Checkbox checked,Select
all Checkboxes,Unselect all check boxes,Invert Selection in checkboxes,Select ALL checkbox using getElementsByTagName
