www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Sep 2010
    Posts
    2

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

    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!

  2. #2
    Join Date
    Mar 2009
    Posts
    430
    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.

  3. #3
    Join Date
    Jul 2007
    Posts
    49
    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>

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    Mar 2009
    Posts
    430
    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.

  6. #6
    Join Date
    Sep 2010
    Posts
    2
    Thanks for all the help you guys!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles