Checked all checkbox when header cell is clicked

I need for all checkbox to be checked or unchecked when either checkbox in header or the checkbox header cell is clicked. My checkbox right now is inverted when header cell is clicked.

$('td').click(function(event) {

  if (!$(event.target).is('input')) {

    $('input:checkbox', this).prop('checked', function(i, value) {

      console.log('i', i)
      console.log('value', value)
      console.log('this', this)

      $(':checkbox').prop('checked', this.checked); // disable this line for working checkedbox when cell is clicked.
      //$(':checkbox[class="check_all"]').prop("checked", $(this).prop("checked"));

      return !value;
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Header. Nothing should happen when clicking a cell in this column</td>
    <td><input id="header" type="checkbox" /></td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td><input class="check_all" type="checkbox" /></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><input class="check_all" type="checkbox" /></td>
  </tr>
</table>

jsFiddle : https://jsfiddle.net/3vn51hor/

Please assist me. Thanks in advance.