I have a table like this:

<table id="contact" class="table table-striped table-hover"> <thead> <tr> <th></th> <th>Сортировать А-Я</th> <th>Телефон</th> <th>Email</th> </tr> </thead> <tr> <td> <img src='Img/persons/<%# Eval("img2")%>.jpg' width="100" height="100" class="img-circle" /> </td> <td> <b class="lead text-success text-center"><%# Eval("lastname")%> <%# Eval("firstname")%> <%# Eval("middlename")%></b> <br /> <%# Eval("company")%> <p><small><%# Eval("position")%></small> </p> <asp:Button ID="ShowContact" runat="server" Text="Узнать Всё" OnCommand="ShowContact_Command" CssClass="btn btn-primary btn-xs" CommandArgument='<%# Eval("id") %>' /> </td> <td> <%# Eval("work_phone1")%> </td> <td> <%# Eval("email1")%> </td> </tr> </table>

How do I use Jquery to hide this when I click on the checkbox:

 <thead> <tr> <th></th> <th>Сортировать А-Я</th> <th>Телефон</th> <th>Email</th> </tr> </thead>

Tried a few ways did not help.

    1 answer 1

     $(document).ready(function() { $('.checkbox').change(function() { if ($(this).is(':checked')) { $('table#contact thead').hide(); } else { $('table#contact thead').show(); } }); }); 
     <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="contact" class="table table-striped table-hover"> <thead> <tr> <th></th> <th>Сортировать А-Я</th> <th>Телефон</th> <th>Email</th> </tr> </thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <div> <input type="checkbox" class="checkbox"> </div>