Javascript Check and Uncheck All Checkboxes:
This is a simple script to check all check boxes in a form using javascript.
You can check all the check boxes inside the table by clicking another one check box placed in header of that table.
In that same way you can uncheck all checkboxes.If you unchecking a single check box from inside the table then the header(main) check box is automatically go to unchecked state.
Code:
This is a simple script to check all check boxes in a form using javascript.
You can check all the check boxes inside the table by clicking another one check box placed in header of that table.
In that same way you can uncheck all checkboxes.If you unchecking a single check box from inside the table then the header(main) check box is automatically go to unchecked state.
Code:
<html>
<head>
<title>JavaScript - Select All checkbox in form</title>
<style type="text/css">
table.tblCheckDemo {
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small;
}
table.tblCheckDemo td {
padding: 5px;
border-right: solid 1px #7f7f7f;
}
table.tblCheckDemo .even {
background-color: #EEE8AC;
}
table.tblCheckDemo .odd {
background-color: #F9FAD0;
}
table.tblCheckDemo th {
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389;
}
</style>
<script LANGUAGE="JavaScript">
function checkMain()
{
if(document.myform.chkMain.checked==true)
{
checkAll()
}
else
{
uncheckAll()
}
}
function checkSub()
{
fruit = document.myform.chkFruit;
var count = 0;
for (i = 0; i < fruit.length; i++)
if(fruit[i].checked)
{
count++;
}
if(fruit.length == count)
{
document.myform.chkMain.checked = true;
}
else
{
document.myform.chkMain.checked = false;
}
}
function checkAll()
{
fruit = document.myform.chkFruit;
for (i = 0; i < fruit.length; i++)
fruit[i].checked = true ;
}
function uncheckAll()
{
fruit = document.myform.chkFruit;
for (i = 0; i < fruit.length; i++)
fruit[i].checked = false ;
}
</script>
</head>
<body>
<form name="myform" method="post">
<b>Select Your Favorite Fruits </b><br>
<table class="tblCheckDemo">
<tr>
<th>S.NO</th>
<th>Fruit</th>
<th> <input type="checkbox" name="chkMain" onClick="checkMain()"></th>
</tr>
<tr class="even">
<td>1</td>
<td>Apple</td>
<td> <input type="checkbox" name="chkFruit" value="1" onClick="checkSub()"></td>
</tr>
<tr class="odd">
<td>2</td>
<td>Orange</td> <td> <input type="checkbox" name="chkFruit" value="2" onClick="checkSub()"></td>
</tr>
.
.
.
.
</table>
</form>
</body>
</html>
Demo:<head>
<title>JavaScript - Select All checkbox in form</title>
<style type="text/css">
table.tblCheckDemo {
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small;
}
table.tblCheckDemo td {
padding: 5px;
border-right: solid 1px #7f7f7f;
}
table.tblCheckDemo .even {
background-color: #EEE8AC;
}
table.tblCheckDemo .odd {
background-color: #F9FAD0;
}
table.tblCheckDemo th {
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389;
}
</style>
<script LANGUAGE="JavaScript">
function checkMain()
{
if(document.myform.chkMain.checked==true)
{
checkAll()
}
else
{
uncheckAll()
}
}
function checkSub()
{
fruit = document.myform.chkFruit;
var count = 0;
for (i = 0; i < fruit.length; i++)
if(fruit[i].checked)
{
count++;
}
if(fruit.length == count)
{
document.myform.chkMain.checked = true;
}
else
{
document.myform.chkMain.checked = false;
}
}
function checkAll()
{
fruit = document.myform.chkFruit;
for (i = 0; i < fruit.length; i++)
fruit[i].checked = true ;
}
function uncheckAll()
{
fruit = document.myform.chkFruit;
for (i = 0; i < fruit.length; i++)
fruit[i].checked = false ;
}
</script>
</head>
<body>
<form name="myform" method="post">
<b>Select Your Favorite Fruits </b><br>
<table class="tblCheckDemo">
<tr>
<th>S.NO</th>
<th>Fruit</th>
<th> <input type="checkbox" name="chkMain" onClick="checkMain()"></th>
</tr>
<tr class="even">
<td>1</td>
<td>Apple</td>
<td> <input type="checkbox" name="chkFruit" value="1" onClick="checkSub()"></td>
</tr>
<tr class="odd">
<td>2</td>
<td>Orange</td> <td> <input type="checkbox" name="chkFruit" value="2" onClick="checkSub()"></td>
</tr>
.
.
.
.
</table>
</form>
</body>
</html>
Posts
0 comments:
Post a Comment
Share your thoughts here...