通过使用jQuery选中复选框来自动隐藏表列 [英] hide table columns automatically by checking a checkbox with jQuery

问题描述

我要显示3个已预先选中的复选框，但是一旦用户取消选中一个框，相关列就会消失.

I want to display 3 checkboxes that are pre-checked, but as soon as the user unchecks a box, the related column disappears.

<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

<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">[e-mail]</td>
</tr>
<tr>
 <td class="first_name">Mike</td>
 <td class="last_name">Tyson</td>
 <td class="email">[e-mail]</td>
</tr>
</tbody>
</table>

我想这将与实时单击事件有关，将每个类设置为.hide()

I imagine it will have to do with a live click event, setting the each class to .hide()

感谢您的帮助

推荐答案

要自动隐藏默认情况下已隐藏的复选框(页面加载)的列，请使用以下代码以及click元素来切换列:

To have columns hidden automatically for checkboxes that are hidden by default (page load), use the following code along with the click element to toggle the columns:

$("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/

此示例还使用了一个选择器，例如:$('table .class_name');如果您在较大的页面上使用代码，则它将是一个更快的选择器，因为它不必搜索每个DOM元素来查找类名，而是仅在表下查找.

This example also uses a selector like: $('table .class_name'); which will be a faster selector if you are using the code on a larger page since it won't have to search through every DOM element to find the class names, it only looks under tables.

这篇关于通过使用jQuery选中复选框来自动隐藏表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！