Jquery按钮重置复选框

Question

I tried using checkbox rather than buttons it works fine but I wanted to try replacing it with a button. I can't make it work, when I click the button it does check the checkbox that I want but when I try to click it again it won't uncheck. I tried making another button it's not working, the purpose of the second button is to reset the checked boxes and check that box that it requires. Can somebody help me?

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

You can simply toggle the checkboxes using the .prop() and select all of them once rather than binding 2 different click events see below

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

or you can alternatively call

selectables.trigger('click');

instead of

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

so that your table columns also interact when selecting the button

then your this code block is what I would say ¯\_(ツ)_/¯ the statement _tot != _tot_checked will always evaluate to false as both of them will always have 10 and will always be equal you can remove it I should say

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

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

See below demo

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

It sounds like you want to uncheck the boxes and then check them again. Starting your click functions with the following code will uncheck the checkboxes before you proceed. Note that I also changed your dom ready function to handle the change event instead of the click event.

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