ocultar columnas de la tabla automáticamente al marcar un checkbox con jQuery

Quiero mostrar 3 casillas de verificación que están pre-marcada, pero tan pronto como el usuario desactiva una casilla de 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 renderizado de la tabla

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

Me imagino que tendrá que ver con un evento de clic, la configuración de cada clase .hide()

Cualquier ayuda es muy apreciada

InformationsquelleAutor Brad | 2011-01-12

2 Kommentare

  1. 4

    A tener columnas oculta automáticamente las casillas de verificación que están ocultos por defecto (la carga de la página), utilice el siguiente código junto con el haga clic en el elemento para cambiar 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();
    });

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

    Este ejemplo también utiliza un selector como: $(‘tabla .class_name’), que será más rápido selector de si usted está utilizando el código de una página más grande, ya que no tendrá que buscar a través de cada elemento de DOM para encontrar los nombres de clase, que sólo se ve debajo de las mesas.

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

    ACTUALIZACIÓN

    Echa un vistazo a la demo en línea aquí: http://jsfiddle.net/8BahZ/

    • Gran ejemplo! — Había un par de errores de HTML, sin embargo. jsfiddle.net/highwayoflife/8BahZ/1
    • las grandes obras. lo que si quería tener un cuadro que está desactivada por defecto, pero es necesario para ocultar la columna correspondiente hasta que se ha comprobado por el usuario.
    • No. He quitado «checked» a partir de una de las casillas de verificación y no trabajo aquí jsfiddle.net/8BahZ
    • de la vida, gracias por señalarlo. @Brad hhmm raro, que hizo por mí, una vez que se ha comprobado la columna correspondiente tiene que desaparecer de la derecha? consultar aquí por última vez: jsfiddle.net/8BahZ/3
    • Quiero 2 de los 3 activada por defecto. Si la casilla de verificación está activada, la pantalla de la columna, si no está activada, no se muestra la columna. Lo siento si he confundido.
    • Acepté la otra respuesta como correcta, pero la suya fue la correcta, pero me disculpo por lanzar una bola curva en la mezcla después de que usted responde originalmente, acerca de la desmarcado las casillas de verificación

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea