Question

我正在尝试一次检查所有未选中的框，但在我的情况下不起作用。我试过没有表就可以工作，但是有表就不能工作，即使我选择班级也没有成功。

$('#checkall').change(function() {
  $('.trcheck').prop("checked", $(this).prop("checked"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-header with-border">
  <label class="btn btn-default" id="checkall">
    <input type="checkbox" id="checkall"> Check All
  </label>
</div>
<div class="box-body">
  <table id="checkboxTable" class="table table-bordered">
    <tbody>
      <tr>
        <th>Table name</th>
        <th>Gen form</th>
        <th>Gen code</th>
        <th>Actions</th>
      </tr>
      <tr class="trcheck">
        <td>{{$table->Tables_in_coder}}</td>
        <td><input type="checkbox" class="chek"></td>
        <td><input type="checkbox" class="chek"></td>
        <td>
          <form action="" method="post">
            <input type="submit" id="genform">
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您的代码有几个问题。首先，当两个元素必须唯一时，您已经在两个元素上重复了相同的id。您将checkall放在label和顶层复选框上。它应该只在复选框上。这也阻止了checked属性的正确读取。

第二，您尝试在.trcheck元素tr上设置选中属性。您需要在子复选框上调用它，因此将选择器更改为.trcheck :checkbox。试试这个：

$('#checkall').change(function() {
  $('.trcheck :checkbox').prop("checked", $(this).prop("checked"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-header with-border">
  <label class="btn btn-default">
    <input type="checkbox" id="checkall"> Check All
  </label>
</div>

<div class="box-body">
  <table id="checkboxTable" class="table table-bordered">
    <tbody>
      <tr>
        <th>Table name</th>
        <th>Gen form</th>
        <th>Gen code</th>
        <th>Actions</th>
      </tr>
      <tr class="trcheck">
        <td>{{$table->Tables_in_coder}}</td>
        <td><input type="checkbox" class="chek"></td>
        <td><input type="checkbox" class="chek"></td>
        <td>
          <form action="" method="post">
            <input type="submit" id="genform">
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

首先有两个id为``的元素，请通过将标签id="checkall"更改为for="checkall"

来解决此问题

由于您的$('.trcheck')不是输入，因此将$('.trcheck input[type=checkbox]')更改为.trcheck

$('#checkall').change(function() {
  $('.trcheck input[type=checkbox]').prop("checked", $(this).prop("checked"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-header with-border">
  <label class="btn btn-default" for="checkall">
            <input type="checkbox" id="checkall"> Check All
        </label>
</div>
<!-- /.box-header -->
<div class="box-body">
  <table id="checkboxTable" class="table table-bordered">
    <tbody>
      <tr>
        <th>Table name</th>
        <th>Gen form</th>
        <th>Gen code</th>
        <th>Actions</th>
      </tr>

      <tr class="trcheck">
        <td>{{$table->Tables_in_coder}}</td>
        <td><input type="checkbox" class="chek"></td>
        <td><input type="checkbox" class="chek"></td>
        <td>
          <form action="" method="post">
            <input type="submit" id="genform">
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</div>

复选框选择全部不适用于我的情况

2 个答案: