Question

我创建了多个标签，每个标签包含一个表格。表格的每一行都有一个复选框，每个表格的标题上都有一个复选框，选中后会选中特定表格中的所有复选框。现在，此复选框适用于第一个选项卡，但是当我切换选项卡时，另一个选中所有复选框都不起作用。所有都具有相同的ID，所以我认为一个jQuery函数就足够了。下面是其中的选项卡和表的结构

仅使用电子邮件按钮第一个标签电子邮件工作

＆＃13;

$('#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);
    });
  }
});

＆＃13;

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

＆＃13;

Answer 1

ids必须是唯一的，将其更改为类或使用其他选择器

$('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);

    }
});

Jquery ui tab。选中仅在一个标签

1 个答案: