The column sort in my tablesorter is overriding the checkall check box in my table header

Question

I'm using the jQuery-2.1.3 version, and applied the jQuery tablesorter to a table to each column heading. My table also has checkboxes, and I need to be able to checkall the checkboxes in the first column. The function I'm using does correctly checkall, but also sorts the table. I am also not able to uncheckall, instead the column just toggles between ascending/descending order.

Here is a link to view my example: http://bitalicious.co/robyn/

<fieldset>
<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <label>
            <!-- checkall is not currentlly working -->
            <input type="checkbox" class="checkall">Business Name
          </label>
        </div>
      </th>
      <th>Contact Name</th>
      <th>Address</th>
      <th>City</th>
      <th>State</th>
      <th class="{sorter: false}"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">ABC Corporation
          </label>
        </div>
      </td>
      <td>Brandon</td>
      <td>290 Plano Pkwy</td>
      <td>Plano</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">Jungle Crabs
          </label>
        </div>
      </td>
      <td>Robyn</td>
      <td>511 Fort Worth Dr</td>
      <td>Denton</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">Big Plates Restaurants
          </label>
        </div>
      </td>
      <td>Justin</td>
      <td>1329 Centrury Blvd</td>
      <td>Irving</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Here's the JavaScript I was using

<!-- jQuery Tablesorter -->
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.metadata.js"></script>
<script type="">
    $(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    );
</script>

<!-- Check all column header currently conflicting with the column sort -->
<!-- refer to site http://briancray.com/posts/check-all-jquery-javascript --> 
<script type="text/javascript">
    $(function () {
        $('.checkall').on('click', function () {
            $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
        });
    });
</script>

Answer 1

I think all that is missing is to stop propagation of the click:

$('.checkall').on('click', function (e) {
    e.stopPropagation();
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});