Select all checkboxes

<table class="table">
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1" class="" data-js="checkbox-select-all">
          <label for="select-all-1">Select all Checkbox</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-1" class="">
          <label for="select-all-1-1">Checkbox 1</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-2" class="">
          <label for="select-all-1-2">Checkbox 2</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-3" class="">
          <label for="select-all-1-3">Checkbox 3</label>
        </div>
      </td>
    </tr>
</table>

Introduction

The select all checkbox must be contained within a table and contain one or more input[type="checkbox"] elements. The data-js=checkbox-select-all attribute should be added to the element that is to trigger the bulk toggle. This behaviour will function correctly on both unstyled checkboxes and checkboxes styled with the data-js=input-checkbox helper.

Usage