JQuery checks if the checkbox is checked

Question

I have a checkbox that shows and hides data that are fetched from my database.

I added another checkbox that can check multiple checkboxes. It works, but my data does not show and hide.

I've been searching the internet but I can't find the solution.

I'm new to jquery. Can someone help me?

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

Here is a working snippet of what I think you want…
I added some code to click on the checkboxes if they are not in the wanted checkbox state, so that it triggers the .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>

Hope it helps.

Answer 2

Problem is $("input:checkbox.empid, input:checkbox.name").prop('checked', $(this).prop("checked")) will only change selection but will not trigger event.

You need to trigger change event on the check box, once you have changed their selection.

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