CODEWITHSUNDEEP
jqueryhtml-table
smurf
smurf

Reputation: 281

Hide table cell until checkbox is checked

Using jQuery, I am looking to keep a table cell hidden until a checkbox has been clicked upon, and disappear if the checkbox is unclicked again. I am very new to jQuery and was wondering if someone could point me in the right direction.

The code I have at the minute:

HTML

<tr>
    <td class="column1">Get Files:</td><td class="column2"><input type=checkbox     
    name="getfiles"></td>
</tr>
<tr>
    <td class="column1"></td><td class="hidden"><i>The size of the files attached will
    be: *0*</i></td>
</tr>

JQUERY

$('#hidden').hide();
$('#getfiles').click(function() {
    if($('#getfiles').is(':checked'))
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

Upvotes: 0

Views: 1639

Answers (1)

WTK
WTK

Reputation: 16961

Note 1: your checkbox doesn't have id getfiles just a name - its not the same.

Note 2: It's in general not a good idea to just hide td element of the table - in most browsers that would trigger weird rendering. Don't touch the td, rather wrap the content you want to hide in another block (it can be a div or anything else):

<table>
<tr>
    <td class="column1">Get Files:</td><td class="column2"><input type=checkbox     
    id="getfiles" name="getfiles"></td>
</tr>
<tr>
    <td class="column1"></td><td><div id="hidden"><i>The size of the files attached will
    be: *0*</i></div></td>
</tr>
</table>

Then this code should work:

$('#hidden').hide();
$('#getfiles').click(function() {
    if(this.checked) {
        $('#hidden').show();
    } else {
        $('#hidden').hide();
    }   
});

Upvotes: 6

Related Questions