Check all checkboxes in HTML table using jQuery

by Piotr Zolopa

HTML

<table id="tblData">
  <tr>
    <th>
      <input type="checkbox" id="chkParent" />
    </th>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Maria Anders</td>
    <td>30</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Francisco Chang</td>
    <td>24</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Roland Mendel</td>
    <td>100</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Helen Bennett</td>
    <td>28</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Yoshi Tannamuri</td>
    <td>35</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Giovanni Rovelli</td>
    <td>46</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Alex Smith</td>
    <td>59</td>
    <td>USA</td>
  </tr>
</table>

CSS

body {
  font-family: arial, sans-serif;
  font-size: 14px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #ccd;
}

tr:nth-child(even) {
  background-color: #ecf6fc;
}

tr:nth-child(odd) {
  background-color: #ddeedd;
}

JavaScript

$(document).ready(function() {
  $('#chkParent').click(function() {
    var isChecked = $(this).prop("checked");
    $('#tblData tr:has(td)').find('input[type="checkbox"]').prop('checked', isChecked);
  });

  $('#tblData tr:has(td)').find('input[type="checkbox"]').click(function() {
    var isChecked = $(this).prop("checked");
    var isHeaderChecked = $("#chkParent").prop("checked");
    if (isChecked == false && isHeaderChecked)
      $("#chkParent").prop('checked', isChecked);
    else {
      $('#tblData tr:has(td)').find('input[type="checkbox"]').each(function() {
        if ($(this).prop("checked") == false)
          isChecked = false;
      });
      console.log(isChecked);
      $("#chkParent").prop('checked', isChecked);
    }
  });
});