隐藏表格单元格,直到选中复选框

Question

使用jQuery,我希望隐藏一个表格单元格,直到单击一个复选框,如果再次单击该复选框,则会消失.我是jQuery的新手,想知道是否有人可以指出我正确的方向.

我现在的代码:

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();
    }   
});

Answer 1

注1:你的复选框没有id getfiles只是一个名字 - 它不一样.

注意2:通常隐藏表的td元素通常不是一个好主意- 在大多数浏览器中会触发奇怪的渲染.不要触摸td,而是将要隐藏的内容包装在另一个块中(它可以是div或其他任何东西):

<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>

然后这段代码应该工作:

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