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,
thanks for the code.
ReplyDeletehttp://www.msnadz.com
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me. I am a regular follower of your blog.
ReplyDeleteReally very informative post you shared here. Kindly keep blogging.
Java training in Btm layout
Java training in Rajaji nagar
Java training in Kalyan nagar
Java training in Kalyan nagar
Java training in Jaya nagar
This comment has been removed by the author.
ReplyDeleteDevelop Marketing, Advertising and Campaign Management Techniques. Learn how to Research and Build the correct Marketing Strategies for key stakeholders. Pay Per Click Marketing. Google Ads.
ReplyDeletebest digital marketing, digital marketing, skartec digital marketing, skartec digital marketing academy, seo training in chennai, best seo service in chennai, digital marketing blog,seo company in chennai, seo course in chennai,seo training in chennai,digital marketing course chennai,digital marketing course fees,,digital marketing training in chennai,online digital marketing courses,best digital marketing course,digital marketing classes,digital marketing institute,digital marketing training institute,best digital marketing course in chennai,online marketing courses,digital marketing institute in chennai,digital marketing training,digital marketing course,best online digital marketing courses,advanced digital marketing course,digital marketing course duration,digital marketing course fees,digital marketing couse fees in chennai,best seo service in chennai,digital marketing blog,free internet marketing resources
This comment has been removed by the author.
ReplyDelete