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
Try this one, select all checkboxes in a row after checked checkbox, http://justwebcode.blogspot.com/2017/07/select-all-checkboxes-in-a-row-following-checked-checkbox.html
ReplyDeleteHi, 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
instagram takipçi satın al
ReplyDeleteaşk kitapları
tiktok takipçi satın al
instagram beğeni satın al
youtube abone satın al
twitter takipçi satın al
tiktok beğeni satın al
tiktok izlenme satın al
twitter takipçi satın al
tiktok takipçi satın al
youtube abone satın al
tiktok beğeni satın al
instagram beğeni satın al
trend topic satın al
trend topic satın al
youtube abone satın al
instagram takipçi satın al
beğeni satın al
tiktok izlenme satın al
sms onay
youtube izlenme satın al
tiktok beğeni satın al
sms onay
sms onay
perde modelleri
instagram takipçi satın al
takipçi satın al
tiktok jeton hilesi
instagram takipçi satın al
pubg uc satın al
sultanbet
marsbahis
betboo
betboo
betboo
170 neyin numarası
ReplyDelete170 nerenin numarası
cumartesi kuyumcular kaça kadar açık
tik tok takipçi arttirma hilesi ücretsiz telefon numarasız
balıkesir token
sivas token