通过使用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>

呈现表格的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">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>

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

任何帮助表示赞赏

Answer 1

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

更新

在这里查看在线演示： http: //jsfiddle.net/8BahZ/

Answer 2

要为默认情况下隐藏的复选框（页面加载）自动隐藏列，请使用以下代码和 click 元素来切换列：

$("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 元素来查找类名，它只在表格下查找。