check and unchecked all the checkbox in a form when a button is clicked.
check and unchecked all the checkbox in a form when a button is clicked.
<html>
<head>
<script>
function check()
{
var check=document.getElementsByTagName('input');
for(var i=0;i<check.length;i++)
{
if(check[i].type=='checkbox')
{
check[i].checked=true;
}
}
}
function uncheck()
{
var uncheck=document.getElementsByTagName('input');
for(var i=0;i<uncheck.length;i++)
{
if(uncheck[i].type=='checkbox')
{
uncheck[i].checked=false;
}
}
}
</script>
<style>
body
{
width:100%;
margin:0 auto;
padding:0px;
background-color:#424242;
font-family:helvetica;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:100%;
}
h1
{
margin-top:50px;
color:#D8D8D8;
}
h1 p
{
font-size:14px;
color:white;
}
input[type="button"]
{
background:none;
color:white;
border:1px solid white;
width:100px;
height:50px;
border-radius:50px;
margin:10px;
font-weight:bold;
}
input[type="checkbox"]
{
width:20px;
height:20px;
}
td
{
color:white;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="Check All" onclick="check();">
<input type="button" value="Uncheck All" onclick="uncheck();">
<table align='center' cellspacing='10'>
<tr>
<td><input type="checkbox"></td><td>PHP</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>HTML</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>JavaScript</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>jQuery</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>CSS</td>
</tr>
<tr>
<td><input type="checkbox"></td><td>MySQL</td>
</tr>
</table>
</div>
</body>
</html>
OUTPUT:
Comments
Post a Comment