Ukryj kolumny tabeli automatycznie, zaznaczając pole wyboru z jQuery

Question

Chcę wyświetlić 3 pola wyboru, które są wstępnie zaznaczone, ale gdy tylko użytkownik usunie zaznaczenie pola, powiązana kolumna znika.

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

wytopione html tabeli

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

sobie wyobrazić będzie miał do czynienia z żywym kliknij zdarzenie, ustawiając każdą klasę .hide()

Każda pomoc jest mile widziana

Answer 1

mieć kolumny ukryte automatycznie do wyboru, które są domyślnie ukryte (obciążenie strony), należy użyć następującego kodu wraz z elementem Kliknij, aby uruchomić te kolumny:

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

Demo: http://jsfiddle.net/highwayoflife/8BahZ/4/

tym przykładzie wykorzystano również selektor jak: $ ('.class_name stół'); który będzie szybszym selektorem, jeśli używasz kodu na większej stronie, ponieważ nie będzie musiał przeszukiwać każdego elementu DOM, aby znaleźć nazwy klas, to tylko wygląda pod tabelami.

Answer 2

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

UPDATE

Sprawdź online demo tutaj: http://jsfiddle.net/8BahZ/