Function to hide table cells depending on whether checkbox is checked or not

**RLJ** · 09-30-2010 01:14 PM

Hi, I am trying to write a Javascript function that checks whether certain checkboxes are checked or not, and then hides cells in a table if the corresponding checkbox is not checked, and makes cells visible if the corresponding checkbox is checked.

This is what I have so far:

Code:

<html>
<head>
<script language="JavaScript">
function ShowHideCell(check,cell) 
{    var CellId = cell;
    if (check.checked == 1) document.getElementById('CellId').style.visibility='visible';
    else document.getElementById('Cell1').style.visibility='hidden'
}
</script>
<style type="text/css"> #Cell1 {visibility:visible; }
                        #Cell2 {visibility:hidden; }
                        #Cell3 {visibility:hidden; }
</style>
</head>

<body>

<TABLE BORDER="0" CELLPADDING="1" CELLSPACING="1">
    <TR><TD><input id="check1"type=checkbox checked=checked onclick="ShowHideCell(check1,cell1)">Some text</TD>        <TD id="cell1"><input type=text size=5></TD></TR>
    <TR><TD><input id="check2"type=checkbox                 onclick="ShowHideCell(check2,cell2)">Some more text</TD><TD id="cell2"><input type=text size=5></TD></TR>
    <TR><TD><input id="check3"type=checkbox                 onclick="ShowHideCell(check3,cell3)">Yet more text</TD>    <TD id="cell3"><input type=text size=5></TD></TR>
</TABLE>

</body>
</html>

The above html gives a (3 rows x 2 columns) table where the checkbox in cell 1x1 (row1,column1) starts checked and corresponding cell 1x2 is visible - as required. However when checking or unchecking any of the checkboxes (which should run the javascript) the cell visibility is not changed.

Can anyone see what I have done wrong? (probably something stupid, I'm new to this stuff)

Thanks!

**Tcobb** · 09-30-2010 01:27 PM

I haven't copied and attempted to run your code, but the "checked" property for an inbox element is a boolean rather than an integer. Perhaps "1" can substitute for "true,"--I don't know. But instead of "if (check.checked == 1)" you might put "if (check.checked === true)," and don't put any quotes around true.

**mortalgod** · 09-30-2010 01:34 PM

A lot of your syntax is wrong, for example:

in the onClick even you should be passing strings
many of your HTML properties are not enclosed in quotes
Your naming is inconsistent (in some places there is Cell1 others it is cell1)
etc etc

This code works:

Code:

<html>
<head>
<script language="JavaScript">
function ShowHideCell(check,cell) 
{ 
	
    if(document.getElementById(check).checked == true){
	document.getElementById(cell).style.visibility='visible';
	}else{
    document.getElementById(cell).style.visibility='hidden';
	}

}
</script>
<style type="text/css"> #Cell1 {visibility:visible; }
                        #Cell2 {visibility:hidden; }
                        #Cell3 {visibility:hidden; }
</style>
</head>

<body>

<TABLE BORDER="0" CELLPADDING="1" CELLSPACING="1">
    <TR><TD><input id="check1"type='checkbox' checked='checked' onchange="ShowHideCell('check1','Cell1')">Some text</TD>        <TD id="Cell1"><input type='text' size='5'></TD></TR>
    <TR><TD><input id="check2"type='checkbox'                 onchange="ShowHideCell('check2','Cell2')">Some more text</TD><TD id="Cell2"><input type='text' size='5'></TD></TR>
    <TR><TD><input id="check3"type='checkbox'                 onchange="ShowHideCell('check3','Cell3')">Yet more text</TD>    <TD id="Cell3"><input type='text' size='5'></TD></TR>
</TABLE>

</body>
</html>

**Kor** · 09-30-2010 01:38 PM

On the other hand: the "hiding" (by visibility or by display) of a form's element (or its parent node) does not mean, automatically, that the element will not submit its value (if any) onsubmit. When you try to hide a form's element, make sure it is also disabled at the same time.

**Tcobb** · 09-30-2010 01:40 PM

Oh yeah--one other thing. Put single quotes around the arguments you're passing to the Javascript in your HTML, such as onclick="ShowHideCell('check1','cell1')"> rather than onclick="ShowHideCell(check1,cell1)">. Even if neglecting to do this will work for a particular browser, you're setting yourself up for potential cross-browser incompatability problems--the bane of Javascript programming.

**RLJ** · 10-01-2010 02:17 PM

Thanks for all the help you guys!

Thread: Function to hide table cells depending on whether checkbox is checked or not

Thread Tools

Display

Function to hide table cells depending on whether checkbox is checked or not

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions