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>

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>

Answer 2

聽起來您想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>

Answer 3

 $("#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>