How to show a table when click a checkbox?

S.Vinothkumar · #1 (**permalink**) 09-26-2007, 11:55 PM

Hi buddies,

I need to show a table when I click a checkbox. If I uncheck that box, table will be hidden.

Is there any sample javascript file?

krishnakumar · #2 (**permalink**) 09-27-2007, 04:18 AM

Hi,

You can do as ur wish....See my coding below,

in check box tag,

Code:

onchange="check(this)"

Script file is,

Code:

function check(ctrl)
{
	//get the state of the check box
	if (ctrl.checked == true) {
		//the box is checked, so show the table
		document.all['moreInfo'].style.display = "inline";
	} else {
		//hide the table
		document.all['moreInfo'].style.display = "none";
	}
}

then you need to create the table and give it a name called "moreInfo"...eg:

Code:

<table border="0" id="moreInfo" style="display:none">
<tr>
<td>Something here</td>
</tr>
</table>

that's it...

S.Vinothkumar · #3 (**permalink**) 09-28-2007, 02:09 AM

Thnx krishna...

It's working fine...Great help!

leoraja8 · #4 (**permalink**) 09-29-2007, 12:04 AM

You will need if you want to make it cross-browser.

Code:

function check(ctrl)
{
    document.getElementById('moreInfo').style.display = (ctrl.checked) ? "":"none";
}

amansundar · #5 (**permalink**) 09-29-2007, 12:11 AM

Wow! a great discussion.

I have a question, how would I use it multiple times on 1 page calling a different table each time..

thanks in advance!

leoraja8 · #6 (**permalink**) 10-03-2007, 08:44 AM

Code:

function check(tableId, ctrl)
{
    document.getElementById(tableId).style.display = (ctrl.checked) ? "":"none";
}
...
<input type="checkbox" name="xxx" value="xxx" onclick="check('moreInfo', this)">
<input type="checkbox" name="yyy" value="yyy" onclick="check('whatever', this)">

GDevakii · #7 (**permalink**) 10-12-2007, 07:02 AM

<html>
<head>

<script type="text/JavaScript">




</script>

</head>

<body>
<table width="206" border="0" cellpadding="0" cellspacing="0" style="width: 30% border: 0;">
<tr width="100%">
<td>
<input type="radio" name="pctype" value="desktop" onfocus="hidelaptop('laptop');return false;" checked />
<span class="linkswhite">No</span><input type="radio" name="pctype" value="laptop" onfocus="showlaptop('laptop');return true;"/>
<span class="linkswhite">Yes
</span></td>
</tr>
</table>

<br>
<div class="options">
<table border="0" cellpadding="0" cellspacing="0">
<tr id="laptop" style="display: none;">
<td class="linkswhite"><div align="left">CCJ<br>
</div></td>
<td> </td>
</tr>
<tr id="laptop" style="display: none;">
<td class="linkswhite">When was the CCJ Registered ? </td>
<td><input name="textfield" type="text" class="textfield"></td>
</tr>
<tr id="laptop" style="display: none;">
<td class="linkswhite">How much was the CCJ for ? </td>
<td><input name="textfield2" type="text" class="textfield"></td>
</tr>
<tr id="laptop" style="display: none;">
<td class="linkswhite">Is the CCJ Satisfied ? </td>
<td><input name="textfield3" type="text" class="textfield"></td>
</tr>
</table>
</div>

</body>
</html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
count the time in seconds that a checkbox is really checked	itbarota	HTML, CSS and Javascript Coding Techniques	1	02-13-2008 10:16 PM
What is the difference between DELETE TABLE and TRUNCATE TABLE commands in SQL Server	oxygen	Database Support	6	11-23-2007 06:17 AM
checkbox validation	rajkumar	HTML, CSS and Javascript Coding Techniques	5	11-16-2007 12:32 AM
I have multi checkbox in my form...	gk_cloud	PHP Programming	2	10-22-2007 06:31 AM
I am having checkbox in datagrid and treeview, while click the button i need to check	kingmaker	C# Programming	3	08-14-2007 09:39 AM