javascript - Jquery按钮重置复选框

Question

我尝试使用复选框而不是按钮，它工作正常，但我想尝试用按钮替换它。我无法使其工作，当我单击按钮时，它确实选中了我想要的复选框，但是当我尝试再次单击它时，它不会取消选中。我尝试制作另一个按钮不起作用，第二个按钮的目的是重置选中的框并选中它需要的框。有人可以帮助我吗？

$("#checkAll").on("click", function() {
  if ($(this).prop("click")) {
    $("input:checkbox.empid:not(:checked), input:checkbox.name:not(:checked)").click();
  } else {
    $("input:checkbox.empid:checked, input:checkbox.name:checked").click();
  }
});

$("#checkAll").on("click", function() {
  if ($(this).prop("click")) {
    $("input:checkbox.name:not(:checked), input:checkbox.age:not(:checked)").click();
  } else {
    $("input:checkbox.name:checked, input:checkbox.age:checked").click();
  }
});

$("input").change(function() {
  _tot = $("input").length
  _tot_checked = $("input").length;
  if (_tot != _tot_checked) {
    $("#checkAll").prop('checked', false);
    $("#chkjob").prop('checked', false);
  }
});

$(function() {

  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#basic_table");

  $chk.prop('checked', false);

  $chk.click(function() {
    var colToHide = $tbl.find("." + $(this).prop("name"));
    $(colToHide).toggle();
  });
});

$("input:checkbox:not(:checked)").each(function() {
  var column = "table ." + $(this).attr("name");
  $(column).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="checkAll" value="List by EmployeeID and Name" />
<input type="button" id="chkjob" value="List by Name and Age " />


<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" class="age" /> Age</p>
  <p><input type="checkbox" name="birth" class="birth" /> Birthdate</p>
  <p><input type="checkbox" name="los" class="los" /> Length of Service</p>
  <p><input type="checkbox" name="jobtitle" class="jobtitle" /> Job Title</p>
  <p><input type="checkbox" name="actions" class="actions" /> actions taken</p>
  <p><input type="checkbox" name="tab" class="tab" /> Tax and Benefits</p>
</div>
<table class="table" id="basic_table">
  <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>

标签： javascriptjquery

Answer 1

您可以简单地使用 切换复选框.prop()并选择所有复选框，而不是绑定 2 个不同的点击事件，见下文

$("#checkAll").on("click", function() {
  var selectables = $("input[type='checkbox'][name='empid'],input[type='checkbox'][name='name'],input[type='checkbox'][name='age']");
  selectables.prop("checked", !selectables.prop("checked"));
});

或者您也可以致电

selectables.trigger('click');

代替

selectables.prop("checked", !selectables.prop("checked"));

这样您的表格列也可以在选择按钮时进行交互

那么你的这个代码块就是我要说的¯\_(ツ)_/¯该语句_tot != _tot_checked将始终评估为false，因为它们将始终具有10并且始终相等，您可以将其删除我应该说

$("input").change(function() {
  _tot = $("input").length
  _tot_checked = $("input").length;

  if (_tot != _tot_checked) {
    $("#checkAll").prop('checked', false);
    $("#chkjob").prop('checked', false);
  }
});

见下面的演示

$("#checkAll").on("click", function() {
  var selectables = $("input[type='checkbox'][name='empid'],input[type='checkbox'][name='name'],input[type='checkbox'][name='age']");
  selectables.trigger('click');
});


$(function() {

  var $chk = $("#grpChkBox input[type='checkbox']");
  var $tbl = $("#basic_table");

  $chk.prop('checked', false);

  $chk.on('click', function() {
    // console.log('click',$tbl.find("." + $(this).prop("name")).length);
    var colToHide = $tbl.find("." + $(this).prop("name"));
    $(colToHide).toggle();
  });
});

$("input:checkbox:not(:checked)").each(function() {
  var column = "table ." + $(this).attr("name");
  $(column).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="checkAll" value="List by EmployeeID and Name" />
<input type="button" id="chkjob" value="List by Name and Age " />


<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" class="age" /> Age</p>
  <p><input type="checkbox" name="birth" class="birth" /> Birthdate</p>
  <p><input type="checkbox" name="los" class="los" /> Length of Service</p>
  <p><input type="checkbox" name="jobtitle" class="jobtitle" /> Job Title</p>
  <p><input type="checkbox" name="actions" class="actions" /> actions taken</p>
  <p><input type="checkbox" name="tab" class="tab" /> Tax and Benefits</p>
</div>
<table class="table" id="basic_table">
  <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>