在同一个表中找到下一个tbody并仅隐藏下一个

Question

我有一张桌子：

<table cellpadding="0" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <th>Kurs</th>
                                    <th>Datum</th>
                                    <th>Zeit</th>
                                    <th>Ort</th>
                                    <th>Anmeldung</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0" id="dates">
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                    </table>

当点击tbody中的复选框时，所有其他tbody都应该消失，当取消选中时，它们应该再次可见。

我尝试了以下jquery，但没有结果：

$(document).ready(function () {
     $("input[type=checkbox]").on('click', function () {
     $(this).next('table').find('tbody').addClass('hide')
     })
})

而且，在可见的时候......

1. ...复选框＆＃34; gk1_2＆＃34;行＆＃34;表-2a＆＃34;应该消失
2. ...复选框＆＃34; gk2a＆＃34;检查，行＆＃34; table-1 _＆＃34;应该消失和复选框＆＃34; gk3＆＃34;应该强制检查。 （3）
3. ...复选框＆＃34; gk3＆＃34;检查无需采取任何措施。

我知道很复杂，我尝试了几种选择但没有成功。非常感谢有人能帮我解决这个问题。

干杯， 卢卡

Answer 1

选择以下两行之一：

$("input[type=checkbox]").on('click', function () {
    $(this).closest('tbody').nextAll('tbody').addClass('hide'); // Add 'hide' class to all _following_  tbody
    $('tbody').not($(this).closest('tbody')).addClass('hide'); // Add 'hide' class to ALL other tbody elements
})

Answer 2

解决方案---＆＃34;当点击tbody中的复选框时，所有其他tbody应该消失，当取消选中时，它们应该再次可见＆＃34;。 虽然有一些样式问题需要修复，但请尝试以下方法：

＆＃13;

＆＃13;

$(document).ready(function () {
     $("input[type=checkbox]").on('click', function () {
      var tbodys = $('tbody');
      for(var i = 0; i<tbodys.length; i++){
        if(!$(this).closest('tbody').is($(tbodys[i]))){
          if((tbodys[i]).className != 'hide'){
            $(tbodys[i]).removeClass('show');
          $(tbodys[i]).addClass('hide');
        }
        else{
          $(tbodys[i]).removeClass('hide');
          $(tbodys[i]).addClass('show');
        }
        }
      }
     });
});

＆＃13;

.hide{
  display: none;
}
.show{
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0">
  <thead>
      <tr>
          <th>Kurs</th>
          <th>Datum</th>
          <th>Zeit</th>
          <th>Ort</th>
          <th>Anmeldung</th>
      </tr>
  </thead>
</table>
<table cellpadding="0" cellspacing="0" border="0" id="dates">
  <tbody role="dategroup">
      <tr class="table-1_2">
          <td>Grundkurs 1</td>
          <td>9. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td rowspan="2">
              <input type="checkbox" id="gk1_2"> </td>
      </tr>
      <tr class="table-1_2">
          <td>Grundkurs 2</td>
          <td>10. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
      </tr>
      <tr class="table-2a">
          <td>Grundkurs 2a</td>
          <td>11. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk2a"> </td>
      </tr>
      <tr class="table-gk3">
          <td>Grundkurs 3</td>
          <td>11. Mai 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk3"> </td>
      </tr>
  </tbody>
  <tbody role="dategroup">
      <tr class="table-1_2">
          <td>Grundkurs 1</td>
          <td>9. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td rowspan="2">
              <input type="checkbox" id="gk1_2"> </td>
      </tr>
      <tr class="table-1_2">
          <td>Grundkurs 2</td>
          <td>10. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
      </tr>
      <tr class="table-2a">
          <td>Grundkurs 2a</td>
          <td>11. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk2a"> </td>
      </tr>
      <tr class="table-gk3">
          <td>Grundkurs 3</td>
          <td>11. Juni 2017</td>
          <td>08:00 - 12:00</td>
          <td>Wallisellen</td>
          <td>
              <input type="checkbox" id="gk3"> </td>
      </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;