Select All, Un Select All,Invert Selection in HTML Javascript.
using getElementsByName
Step 1) Add check boxes to html page
<input type='checkbox' value= 'C' name="prog">C</input>
<input type='checkbox' value= 'C++' name="prog">C#</input>
<input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
<input type='checkbox' value= 'C#' name="prog">C#</input>
<input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
<input type='checkbox' value= 'PHP ' name="prog">PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
<input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
<input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
<input type='checkbox' value= 'Power Shell ' name="prog">Power Shell</input><br />
<input type='checkbox' value= 'C++' name="prog">C#</input>
<input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
<input type='checkbox' value= 'C#' name="prog">C#</input>
<input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
<input type='checkbox' value= 'PHP ' name="prog">PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
<input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
<input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
<input type='checkbox' value= 'Power Shell ' name="prog">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
<script type="text/javascript">
function SelectALL(status) {
var eleNodelist = document.getElementsByName('prog');
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>
function SelectALL(status) {
var eleNodelist = document.getElementsByName('prog');
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>
Complete Source Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type='checkbox' value= 'C' name="prog">C</input>
<input type='checkbox' value= 'C++' name="prog">C#</input>
<input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
<input type='checkbox' value= 'C#' name="prog">C#</input>
<input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
<input type='checkbox' value= 'PHP ' name="prog">PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
<input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
<input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
<input type='checkbox' value= 'Power Shell ' name="prog">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.getElementsByName('prog');
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' name="prog">C</input>
<input type='checkbox' value= 'C++' name="prog">C#</input>
<input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
<input type='checkbox' value= 'C#' name="prog">C#</input>
<input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
<input type='checkbox' value= 'PHP ' name="prog">PHP</input>
<input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
<input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
<input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
<input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
<input type='checkbox' value= 'Power Shell ' name="prog">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.getElementsByName('prog');
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 getElementsByName,html checkbox, multiple checkbox in HTML Page,document.getElementsByName,Checkbox checked,Select all Checkboxes,Unselect all check boxes,Invert Selection in checkboxes,
