Question

我有一个复选框，显示和隐藏从我的数据库中提取的数据。

我添加了另一个可以检查多个复选框的复选框。它有效，但我的数据没有显示和隐藏。

我一直在网上搜索，但我找不到解决方案。

我是jquery的新手。有人能帮助我吗？

$("#checkAll").change(function() {
  $("input:checkbox.empid, input:checkbox.name").prop('checked', $(this).prop("checked"));
});
$("input").change(function() {
  _tot = $("input").length
  _tot_checked = $("input").length;

  if (_tot != _tot_checked) {
    $("#checkAll").prop('checked', false);
  }
});

$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");

  $chk.prop('checked', true);

  $chk.click(function() {
    var colToHide = $tbl.find("." + $(this).prop("name"));
    $(colToHide).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" /> empid and name

<div id="grpChkBox">
  <p><input type="checkbox" name="empid" class="empid" /> Employee ID</p>
  <p><input type="checkbox" name="name" class="name" /> Name</p>
  <p><input type="checkbox" name="age" /> Age</p>
  <p><input type="checkbox" name="birth" /> Birthdate</p>
  <p><input type="checkbox" name="los" /> Length of Service</p>
  <p><input type="checkbox" name="jobtitle" /> Job Title</p>
  <p><input type="checkbox" name="actions" /> actions taken</p>
  <p><input type="checkbox" name="tab" /> Tax and Benefits</p>
</div>
<table class="table" id="someTable">
  <thead>
    <tr>

      <th scope="col" class="empid">id</th>
      <th scope="col" class="name">Name</th>
      <th scope="col" class="age">Age</th>
      <th scope="col" class="birth">Birthdate</th>
      <th scope="col" class="los">Length of Service</th>
      <th scope="col" class="jobtitle">Job title</th>
      <th scope="col" class="actions">actions taken</th>
      <th scope="col" class="tab">tax</th>
    </tr>
  </thead>
  @if(count($reports) > 1) @foreach($reports as $report)


  <tbody>
    <tr>
      <th class="empid">{{$report->id}}</th>
      <td class="name">{{$report->name}}</td>
      <td class="age">{{$report->age}}</td>
      <td class="birth">{{$report->birthdate}}</td>
      <td class="los">{{$report->length_of_service}}</td>
      <td class="jobtitle">{{$report->job_title}}</td>
      <td class="actions">{{$report->actions}}</td>
      <td class="tab">{{$report->tax}}</td>
    </tr>
  </tbody>

Answer 1

问题是$("input:checkbox.empid, input:checkbox.name").prop('checked', $(this).prop("checked"))只会更改选择，但不会触发事件。

更改选择后，您需要在复选框上触发change事件。

$("#checkAll").change(function() {
  $("input:checkbox.empid, input:checkbox.name").prop('checked', $(this).prop("checked")).trigger('change');
});

Answer 2

以下是我认为你想要的工作片段。
我在复选框上添加了一些代码click，如果它们不在所需的复选框状态，那么它会触发.change()。

$("#checkAll").change(function() {
  if ($(this).prop("checked")) {
    $("input:checkbox.empid:not(:checked), input:checkbox.name:not(:checked)").click();
  } else {
    $("input:checkbox.empid:checked, input:checkbox.name:checked").click();
  }
});

$("input").change(function() {
  _tot = $("input").length
  _tot_checked = $("input").length;

  if (_tot != _tot_checked) {
    $("#checkAll").prop('checked', false);
  }
});

$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");

  $chk.prop('checked', true);

  $chk.click(function() {
    var colToHide = $tbl.find("." + $(this).prop("name"));
    $(colToHide).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" /> empid and name

<div id="grpChkBox">
  <p><input type="checkbox" name="empid" class="empid" /> Employee ID</p>
  <p><input type="checkbox" name="name" class="name" /> Name</p>
  <p><input type="checkbox" name="age" /> Age</p>
  <p><input type="checkbox" name="birth" /> Birthdate</p>
  <p><input type="checkbox" name="los" /> Length of Service</p>
  <p><input type="checkbox" name="jobtitle" /> Job Title</p>
  <p><input type="checkbox" name="actions" /> actions taken</p>
  <p><input type="checkbox" name="tab" /> Tax and Benefits</p>
</div>
<table class="table" id="someTable">
  <thead>
    <tr>
      <th scope="col" class="empid">id</th>
      <th scope="col" class="name">Name</th>
      <th scope="col" class="age">Age</th>
      <th scope="col" class="birth">Birthdate</th>
      <th scope="col" class="los">Length of Service</th>
      <th scope="col" class="jobtitle">Job title</th>
      <th scope="col" class="actions">actions taken</th>
      <th scope="col" class="tab">tax</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="empid">{{$report->id}}</th>
      <td class="name">{{$report->name}}</td>
      <td class="age">{{$report->age}}</td>
      <td class="birth">{{$report->birthdate}}</td>
      <td class="los">{{$report->length_of_service}}</td>
      <td class="jobtitle">{{$report->job_title}}</td>
      <td class="actions">{{$report->actions}}</td>
      <td class="tab">{{$report->tax}}</td>
    </tr>
  </tbody>

希望它有所帮助。

JQuery检查是否选中了复选框

2 个答案: