ocultar las columnas de la tabla automáticamente marcando una casilla de verificación con jQuery

Question

Quiero mostrar 3 casillas de verificación que están preconfiguradas, pero tan pronto como el usuario desactive una casilla, la columna relacionada desaparece.

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

HTML procesado de la mesa

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

me imagino que tendrá que ver con un evento click en vivo, el establecimiento de la clase para cada .hide()

cualquier ayuda se agradece

Answer 1

Para tener columnas ocultas de forma automática para casillas de verificación que están ocultos por defecto (carga de la página), utilice el siguiente código junto con el elemento Pulse para alternar las columnas:

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

demostración: http://jsfiddle.net/highwayoflife/8BahZ/4/

Este ejemplo también utiliza un selector como: $ ('mesa .class_name'); que será un selector más rápido si está usando el código en una página más grande ya que no tendrá que buscar en todos los elementos DOM para encontrar los nombres de las clases, solo se ve debajo de las tablas.

Answer 2

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

ACTUALIZACIÓN

Mira la demostración en línea aquí: http://jsfiddle.net/8BahZ/