当在jquery中检查一个复选框时，如何隐藏表的tr？

Question

在表格中我有tr。在第一个tr我有复选框。如果未选中该复选框，则必须隐藏其他tr值。如果选中它，则显示所有其他tr。

我已经在小提琴中展示了它，一旦检查并请求我解决方案，

http://jsfiddle.net/Y39Bu/99/

HTML

<table>
<tr>
  <td><input type="checkbox" id="checker"></td>
</tr>
<div id='dependent-box'>
<tr>
  <td>Hii</td>
</tr>
<tr>
  <td>Hii</td>
</tr>
<tr>
  <td>Hii</td>
</tr>

    

JS

$(document).ready(function () {
    var checkbox = $('#checker'); 
    var dependent = $('#dependent-box');
    if (checkbox.attr('checked') !== undefined){
       dependent.show();
    } else {
        dependent.hide();
    }

    checkbox.change(function(e){
       dependent.toggle(); 
    });
}); 

Answer 1

div无法嵌套在table中。尝试以下。

$(document).ready(function () {
    var checkbox = $('#checker');
    var dependent = $('tr').not(':first');

    checkbox.change(function () {
        dependent.toggle(this.checked);
    }).change(); //auto execute after documet ready
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="checkbox" id="checker">
        </td>
    </tr>
    <tr>
        <td>Hii</td>
    </tr>
    <tr>
        <td>Hii</td>
    </tr>
    <tr>
        <td>Hii</td>
    </tr>
</table>

Answer 2

您应该使用tbody代替div。 注意：您可以在表中使用多个tbody

$(document).ready(function () {
        var checkbox = $('#checker'); 
        var dependent = $('#dependent-box');
        if (checkbox.attr('checked') !== undefined){
           dependent.show();
        } else {
            dependent.hide();
        }
        
        checkbox.change(function(e){
           dependent.toggle(); 
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr>
      <td><input type="checkbox" id="checker"></td>
    </tr>
    <tbody id='dependent-box'>
    <tr>
      <td>Hii</td>
    </tr>
    <tr>
      <td>Hii</td>
    </tr>
    <tr>
      <td>Hii</td>
    </tr>
    </tbody>
    </table>

Answer 3

你可以这样尝试

 <table>
<tr>
  <td><input type="checkbox" id="checker"></td>
</tr>
<tr class="dependent-box">
  <td>Hii</td>
</tr>
<tr class="dependent-box">
  <td>Hii</td>
</tr>
<tr class="dependent-box">
  <td>Hii</td>
</tr>
</table>

这是javascript代码

   $(document).ready(function () {
    var checkbox = $('#checker'); 
    var dependent = $('.dependent-box');
    if (checkbox.attr('checked') !== undefined){
       dependent.show();
    } else {
        dependent.hide();
    }

    checkbox.change(function(e){
       dependent.toggle(); 
    });
});