In this tutorial we will learn how to hide or display controls (checkboxes in this example) when user checks off or on another checkbox. Here there is a checkbox "My Operating system is Linux ". When user checks this checkbox two additional checkboxes are visible. If user does not checks off the checkbox " My Operating system is Linux " then these two additional checkboxes are hidden.
You can check the demo checkboxhide.html.
This is done in few simple steps
1) Put your checkbox to Dispaly/Hide in a <TR> (table row) and give that row a specific ID.
2)Catch that row using the id in a Javascript function (getElementById()), then decide whether you want to display or hide the row. Set the display property as 'none' to hide the checkbox and to blank ('') to display the checkbox.
In our code this is done by the javascript code
<script language="javascript">
function changeFilePermsMode(cId)
{
if (document.getElementById(cId).style.display != 'none')
document.getElementById(cId).style.display = 'none';
else
document.getElementById(cId).style.display = '';
return;
}
</script>
Here the ID of the table row is passed to the function using the parameter cId. Inside the function we are catching the row using the javascript function
document.getelEmentById(cId)
Then we set the Style attribute of the row according to our preference.
In the onClick event of the checkbox we call this function as
<input name="upgrade" value="on" type="checkbox" onClick="changeFilePermsMode('upgrade11');changeFilePermsMode('upgrade12')" >
where 'upgrade11' and 'upgrade12' are id's of the table rows to hide/display.
You can see the full code of this below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html;CHARSET=iso-8859-1">
<script language="javascript">
function changeFilePermsMode(cId)
{
if (document.getElementById(cId).style.display != 'none')
document.getElementById(cId).style.display = 'none';
else
document.getElementById(cId).style.display = '';
return;
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<table >
<tr>
<td >
<input name="upgrade" value="on" type="checkbox" onClick="changeFilePermsMode('upgrade11');changeFilePermsMode('upgrade12')" >
My Operating system is Linux
</td>
</tr>
<tr id='upgrade11' style="display:none">
<td>
<input name="upgrade2" value="on" type="checkbox"> version Fedora Core -1
</td>
</tr>
<tr id='upgrade12' style="display:none">
<td>
<input name="upgrade2" value="on" type="checkbox">version Fedora Core -2
</td>
</tr>
</table>
</body></html>
So , that's it . Hope you have enjoyed the tutorial. Thank You.
Back to Tutorial Index page
Your comments are most welcome admin@koderguru.com
|
