Checkbox & Select all

by Wentz Wu

HTML

<table>
  <tr>
    <td>
      <input type="checkbox" class="checkbox checkbox-select-all"> Select All
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox" data-id="1">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox" data-id="2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox" data-id="3">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox" data-id="4">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkbox" data-id="5">
    </td>
  </tr>
</table>

JavaScript

$(".checkbox-select-all")
  .change(function(e) {
    var $self = $(this);
    var isSelectAll = $self.prop("checked");
    var $checkoutboxes = $(".checkbox");
    $checkoutboxes.prop("checked", isSelectAll);
  });