隱藏表列自動勾選複選框使用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">larry@gmail.com</td> 
</tr> 
<tr> 
<td class="first_name">Mike</td> 
<td class="last_name">Tyson</td> 
<td class="email">mike@gmail.com</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/