Question

我添加了复选框（class =“ checkAllBtn”），该复选框选中了页面中的所有复选框。

此复选框位于类“ checkAllBox”的元素内部

我想对其进行更改，因此它将仅标记/选中“ checkAllBtn”所在的表（或div）“ checkAllBox”中的复选框（或者我在其中具有“ checkAllBox”的编号）页面）

$(function() {
  var chkMain = $('.checkAllBox input:checkbox.checkAllBtn');
  $(chkMain).change(function() {
    $('.checkAllBox input:checkbox').not(this).prop('checked', this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped table-hover checkAllBox">
    <thead>
      <tr>
        <th>
          <div class="checkbox checkbox-info">
            <input id="checkbox1" type="checkbox" class="checkAllBtn" checked>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox checkbox-info">
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info">
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您选中所有复选框的选择器是错误的，因此没有附加事件处理程序。

我将input:checkbox.checkAllBtn更改为input.checkAllBtn:checkbox 另外，正如Tyler指出的那样，无需在jQuery中包装两次元素。因此，我删除了第二个jQuery包装器，并更改了变量名称，使其以$开头，以指示变量中存在一个jQuery对象。

$(function() {
  var $chkMain = $('.checkAllBox input.checkAllBtn:checkbox');
  $chkMain.change(function() {
    $('.checkAllBox input:checkbox').not(this).prop('checked', this.checked);
  });
});

table,
tr,
td,
p{
  padding: 0px;
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped table-hover checkAllBox">
    <thead>
      <tr>
        <th>
          <div class="checkbox checkbox-info">
            <p>all</p>
            <input id="checkbox1" type="checkbox" class="checkAllBtn" checked>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox checkbox-info">
            <p>check this</p>
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info">
            <p>check this</p>
            <input id="checkbox300" type="checkbox" checked>
            <label for="checkbox300"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <p>This will not be checked</p>
    <input id="checkbox400" type="checkbox" checked>
    <label for="checkbox400"></label>
  </div>
</div>

Answer 2

如果只想影响包含“全部选中”复选框的表中的元素，则可以使用jQuery查找父表元素，而仅影响其中的复选框...

$(".check-all").on("click", function() {
  $(this)
    .closest("table")               // find the nearest parent table
    .find("input[type=checkbox]")   // find all the checkboxes
    .not(this)                      // but not this one
    .attr("checked", this.checked); // set the checked state of them all
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table>
    <tr><td><input type="checkbox" class="check-all"/> Check/uncheck all in this table</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
</table>
<h3>Table 2</h3>
<table>
    <tr><td><input type="checkbox" class="check-all"/> Check/uncheck all in this table</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
</table>

选中复选框数量的复选框

2 个答案: