我想显示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()
任何帮助表示赞赏
解决方法
要为默认隐藏的复选框(页面加载)自动隐藏列,请使用以下代码和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元素来查找类名,它只在表下查找.
