All Checkboxes With One Tap

All checkboxes of a set can be made to conform to a controlling checkbox.

In other words, when the controlling checkbox is tapped, all checkboxes of the set are checked or unchecked according to the state of the controlling checkbox.

The functionality can be desired when there are many checkboxes in a set. I recently needed such functionality.

A dashboard I'm making is being coded to export a table from database entries. The columns to include in the table are specified with checkboxes. Instead of requiring the user to tap 10 times to select all columns, I made an "ALL" checkbox to do it.

Form users who want most of the columns for their table can tap "ALL" and then uncheck the ones they don't want.

The online article has a demonstration and source code. (The demonstration wouldn't work in most email readers because JavaScript is employed.)

Here is a demonstration.

When the "ALL" checkbox is tapped, it overrides all checkboxes in the set. Whether checked or unchecked, the checkboxes will conform to the "ALL" checkbox.

Here is the source code for the entire demonstration, both the HTML and the JavaScript.

<div style="width:fit-content; border:1px solid #ccc; padding:.5em; border-radius:.5em; margin:.25em;">
<b>Columns</b>
<div style="margin-left:-.5em; margin-right:-.5em; height:0px; border-top:1px solid #ccc;"></div>
<label><input type="checkbox" id="all" onclick="AllBoxesCheckUncheck()">&thinsp;&#10003;ALL</label>
<div style="margin-left:-.5em; margin-right:-.5em; height:3px; border-top:1px solid #ccc;"></div>
    <label><input type="checkbox" id="account">&thinsp;Account</label>
<br><label><input type="checkbox" id="date">&thinsp;Date</label>
<br><label><input type="checkbox" id="type">&thinsp;Type</label>
<br><label><input type="checkbox" id="desc">&thinsp;Description</label>
<br><label><input type="checkbox" id="point">&thinsp;To/From</label>
<br><label><input type="checkbox" id="credit">&thinsp;Credit</label>
<br><label><input type="checkbox" id="debit">&thinsp;Debit</label>
<br><label><input type="checkbox" id="draw">&thinsp;Draw</label>
<br><label><input type="checkbox" id="cat">&thinsp;Category</label>
<br><label><input type="checkbox" id="notes">&thinsp;Notes</label>
</div>

<script type="text/javascript">
function AllBoxesCheckUncheck()
{
   var all = document.getElementById("all").checked;
   var checkboxes = new Array(
      "account",
      "date",
      "type",
      "desc",
      "point",
      "credit",
      "debit",
      "draw",
      "cat",
      "notes",
   );
   for(var i=0; i<checkboxes.length; i++) { document.getElementById(checkboxes[i]).checked = all; }
}
</script>

When the "ALL" checkbox is tapped, it calls the AllBoxesCheckUncheck() function.

The AllBoxesCheckUncheck() function has an array of all the checkbox id values (color coded blue). Those are the checkboxes that will be conformed to the state of the "ALL" checkbox — whether "ALL" is checked or unchecked.

The usability of a large set of checkboxes generally can be improved by allowing one tap to check or uncheck all checkboxes of the set.

(This content first appeared in Possibilities newsletter.)

Will Bontrager