隐藏表列自动勾选复选框使用jQuery

Question

我想显示3个复选框被预签，但只要用户取消选中一个框，列相关消失。

<p><input type="checkbox" name="first_name" checked> First Name</p> 
<p><input type="checkbox" name="last_name" checked> Last Name</p> 
<p><input type="checkbox" name="email" checked> Email</p> 

渲染表

<table id="report> 
<thead> 
<tr> 
<th class="first_name">First Name</th> 
<th class="last_name">Last Name</th> 
<th class="email">Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="first_name">Larry</td> 
<td class="last_name">Hughes</td> 
<td class="email">[email protected]</td> 
</tr> 
<tr> 
<td class="first_name">Mike</td> 
<td class="last_name">Tyson</td> 
<td class="email">[email protected]</td> 
</tr> 
</tbody> 
</table> 

我想它会与现场click事件做的HTML，设置每个班.hide（）

任何帮助表示赞赏

Answer 1

要自动隐藏由默认值（网页加载）隐藏复选框列，使用下面的代码与掣子元件一起切换列：

$("input:checkbox:not(:checked)").each(function() { 
    var column = "table ." + $(this).attr("name"); 
    $(column).hide(); 
}); 

$("input:checkbox").click(function(){ 
    var column = "table ." + $(this).attr("name"); 
    $(column).toggle(); 
}); 

演示：http://jsfiddle.net/highwayoflife/8BahZ/4/

该实施例还使用了一个选择器，如：$（ '表.class_name'）;如果您在较大的页面上使用代码，这将是更快的选择器，因为它不必搜索每个DOM元素以查找类名称，它只会查看表格。

Answer 2

$("input:checkbox").click(function(){ 
     var column = "."+$(this).attr("name"); 
     $(column).toggle(); 
}); 

UPDATE

退房的在线演示在这里：http://jsfiddle.net/8BahZ/