Question

我有两个表格，其中填充了许多复选框（数字根据前一个屏幕上定义的检索配置文件而变化）。我已在每个表格的顶部实施了一个“全选”复选框，其中包含以下内容：

    $('#select_all').bind('click', function() {
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;
        });
    }
 });

但是这个函数选择了两个表中的所有复选框（因为写得不好）。是否有一种简单的方法可以让代码选中每个不同表中的所有复选框。

感谢。

Answer 1

你需要让你的css更具选择性。可能没有必要为每个使用id和完全不同的点击功能。你可能只需要一个绑定到两者的单击功能并使用正确的选择器，但很难知道没有看到你的HTML。

如果你发布你的html它会更容易帮助你，但你需要以下内容：

＆＃13;

$('#select_all1').bind('click', function() {
  var checkedState = this.checked;
  $('#table1 :checkbox').each(function() {
      this.checked = checkedState;
  });
});

$('#select_all2').bind('click', function() {
  var checkedState = this.checked;
  $('#table2 :checkbox').each(function() {
      this.checked = checkedState;
  });
});

＆＃13;

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

＆＃13;

Answer 2

建议您对表使用class属性，因为ID应该是唯一的。

创建一个变量以存储最接近复选框当前复选框的表的值，并将该变量与Selector连接起来。

$('.selectAll').bind('click', function() {
  var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
  var checkedState = this.checked;//variable for checkbox checked.
  $(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
    this.checked = checkedState;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
  <tr>
    <th> <input type="checkbox" class="selectAll"></th>
    <th>Select All</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="1"></td>
    <td>Hello</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="2"></td>
    <td>Hi</td>
  </tr>

</table>
<table class="checkTable">
  <tr>
    <th><input type="checkbox" class="selectAll"></th>
    <th>Select All</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="3"></td>
    <td>One</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="4"></td>
    <td>Two</td>
  </tr>

</table>

Answer 3

对不同的表使用不同的id或对表使用class而不是id，如下所示：

$('.select_all').bind('click', function() {
if(this.checked) {
    $(':checkbox').each(function() {
        this.checked = true;
    });
} else {
    $(':checkbox').each(function() {
        this.checked = false;
    });
}
});

JQuery Two＆＃39;全选＆＃39;两个表格中的复选框

3 个答案: