Jquery UIタブ。 1つのタブでのみ動作するすべてのチェックボックスを選択してください

Question

私は1つのテーブルをそれぞれ含む複数のタブを作成しました。テーブルの各行にチェックボックスがあり、各テーブルの見出しにチェックボックスがあり、チェックすると特定のテーブルのすべてのチェックボックスが選択されます。このチェックボックスは最初のタブで機能していますが、タブを切り替えると他のすべてのチェックボックスが選択されていません。すべてが同じidを持つので、jQuery関数が1つで十分だと思います。以下は、それが

同じ電子メールボタンのみ最初のタブの電子メールで起こる内部のタブとテーブルの構造は作品です

$('#all').change(function() { 
 
    if ($(this).prop('checked')) { 
 
    $('tbody tr td input[type="checkbox"]').each(function() { 
 
     $(this).prop('checked', true); 
 
    }); 
 
    } else { 
 
    $('tbody tr td input[type="checkbox"]').each(function() { 
 
     $(this).prop('checked', false); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"> 
 
    <a href="#profile" data-toggle="tab"> 
 
     <span class="glyphicon glyphicon-info-sign"></span> EN 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#tab-emp-name" data-toggle="tab"> 
 
     <span class="glyphicon glyphicon-home"></span> EN 
 
    </a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="profile"> 
 
    <div class="clearfix" style="margin: 10px 0;"> 
 
     <a href="https://mail.xxxx.com" class="btn btn-warning" id="email"> 
 
     <span class="glyphicon glyphicon-envelope"></span> Email 
 
     </a> 
 
    </div> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th> 
 
      <span class="label label-danger">Select All</span> 
 
      &nbsp;&nbsp; 
 
      <input type='checkbox' name='check_all' id='all'> 
 
      </th> 
 
      <th></th> 
 
      <th>Number</th> 
 
      <th>Name</th> 
 
      <th>Gender</th> 
 
      <th>Date of Birth</th> 
 
      <th>Email</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="tbody-emps"></tbody> 
 
    </table> 
 
    </div> 
 
    <div class="tab-pane" id="tab-emp-name"> 
 
    <div class="clearfix" style="margin: 10px 0;"> 
 
     <a href="https://mail.xxx.com" class="btn btn-warning" id="email"> 
 
     <span class="glyphicon glyphicon-envelope"></span> Email 
 
     </a> 
 
    </div> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th> 
 
      <span class="label label-danger">Select All</span> 
 
      &nbsp;&nbsp; 
 
      <input type='checkbox' name='check_all' id='all'> 
 
      </th> 
 
      <th></th> 
 
      <th>Number</th> 
 
      <th>Name</th> 
 
      <th>Gender</th> 
 
      <th>Date of Birth</th> 
 
      <th>Email</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="tbody-emp-name"></tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

IDは、一意であるクラスに変更するか、使用する必要があります。異なるセレクタ

$('th input[type="checkbox"]').change(function() { 
    if ($(this).prop('checked')) { 
     $(this).closest('table').find('input[type="checkbox"]').prop('checked', true); 
    } else { 
     $(this).closest('table').find('input[type="checkbox"]').prop('checked', false); 

    } 
});