Select All Component

The Select All Checkbox pattern wrapped in a reusable component. Drop a <master-checkbox> into any table header and it just works.

Example: Master checkbox component

<script type="text/hyperscript-template" component="master-checkbox">
  <input type="checkbox" _="set :checkboxes to <input[type=checkbox]/> in the closest <table/> where it is not me
            on change
               set checked of the :checkboxes to my checked
             on change from the closest <table/>
               if no :checkboxes where it is checked
                 set my indeterminate to false
                 set my checked to false
               else if no :checkboxes where it is not checked
                 set my indeterminate to false
                 set my checked to true
               else
                 set my indeterminate to true
               end">
</script>
<table>
<thead>
  <tr>
    <th><master-checkbox></master-checkbox></th>
    <th>Task</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Write documentation</td>
    <td>In progress</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Fix login bug</td>
    <td>Open</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Deploy to staging</td>
    <td>Pending</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Review pull request</td>
    <td>Open</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Update dependencies</td>
    <td>Open</td>
  </tr>
</tbody>
</table>

	Task	Status
	Write documentation	In progress
	Fix login bug	Open
	Deploy to staging	Pending
	Review pull request	Open
	Update dependencies	Open

Try It!

The component uses the same on change + live pattern as the inline version. The live block reactively queries the DOM for checked checkboxes and updates the header state automatically.

Because the scope is the closest <table/> rather than the next <tbody/>, the component works regardless of where it's placed in the table structure. Drop it into any <th> and it automatically controls the checkboxes in the same table.