Jquery按钮重置复选框

时间：2018-05-01 21:37:21

标签： javascript jquery

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

＆＃13;
＆＃13; 
$("#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();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

听起来你想要uncheck这些方框，然后再次检查它们。使用以下代码启动click函数将取消选中复选框，然后再继续。请注意，我还更改了dom ready函数来处理change事件，而不是click事件。

$("#grpChkBox input[type=checkbox]:checked").prop("checked", false);


$("#checkAll").on("click", function() {
  $("#grpChkBox input[type=checkbox]:checked").prop("checked", false);
  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();
  }
});

$("#chkjob").on("click", function() {
  $("#grpChkBox input[type=checkbox]:checked").prop("checked", false);
  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();
  }
});


$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#basic_table");
  $chk.change(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>

相关问题
最新问题