ẩn các cột bảng tự động bằng cách chọn hộp kiểm với jQuery

Question

Tôi muốn hiển thị 3 hộp kiểm được kiểm tra trước, nhưng ngay sau khi người dùng bỏ chọn hộp, cột có liên quan sẽ biến mất.

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

rendered html của bảng

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

tôi tưởng tượng nó sẽ phải làm gì với một sự kiện click trực tiếp, thiết lập các từng lớp để .hide()

Any help is appreciated

Answer 1

Để có cột ẩn tự động cho các hộp kiểm được ẩn theo mặc định (tải trang), sử dụng đoạn mã sau cùng với các yếu tố nhấp chuột để chuyển đổi các cột:

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

Ví dụ này cũng sử dụng một bộ chọn như: $ ('bảng .class_name'); sẽ là bộ chọn nhanh hơn nếu bạn đang sử dụng mã trên một trang lớn hơn vì nó sẽ không phải tìm kiếm qua mọi phần tử DOM để tìm các tên lớp, nó chỉ trông dưới các bảng.

Answer 2

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

CẬP NHẬT

Kiểm tra các bản demo trực tuyến tại đây: http://jsfiddle.net/8BahZ/