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

通过使用jQuery选中一个复选框，自动隐藏表列

2 个答案: