Checking and Unchecking All Checkboxes in a Form

Create buttons that trigger JavaScript code to check and uncheck multiple checkboxes in a form with a single click.

By Bob Ray
December 15, 2021
Checking and Unchecking All Checkboxes in a Form

A while back, I was working on a form for my MODX Extra (SiteCheck) with a bunch of checkboxes, and I needed some buttons that triggered JavaScript code to check and uncheck all of them. I thought I’d share what I came up with.

The Form

Here’s a generic, shortened version of the form. I’ve made everything flush left so you can see more of it without scrolling.

<div class="my_form_form_div">
    <form id="my_form_form" method="post">
        <fieldset id="my_form_fieldset" style="width:20%">
            <div id="checkbox_div">
                <h3>Select the tasks to be Performed</h3>
                <input type="checkbox" name="my_form_tasks[]" [[!+checkResourcesChecked]] value="checkResources" /> Check Resources<br />
                <input type="checkbox" name="my_form_tasks[]" [[!+checkSnippetsChecked]] value="checkSnippets"> Check Snippets<br />
                <input type="checkbox" name="my_form_tasks[]" [[!+checkPluginsChecked]] value="checkPlugins"> Check Plugins<br />
                <input type="button" class="my_form-check-button" onClick="checkAll(true);" value="Check All" />
                <input type="button" class="my_form-check-button" onClick="checkAll(false);" value="Clear All" />
                <input type="hidden" name="submitVar" value="MySubmitVar">
            </div>
            <br class="clear" />
            <input type="checkbox" name="my_form_verbose" value="verbose"> Verbose Output<br />
            <br class="clear" />
            <br />
            <div class="form-button">
                <input type="submit" id="my_form_submit" name="my_form_do_tasks" value="Perform tasks" />
            </div>
        </fieldset>
    </form>
</div>

Notice the code for the two buttons, Check All and Clear All. Both contain an onClick() event that calls the Javascript Code to check or uncheck the checkboxes, each with a different argument, when the user clicks on the button. The tricky thing is that I didn’t want to check or clear the “Verbose” checkbox with either button. The buttons are just for the list of tests to perform.

Here’s a relatively unstyled view of the form as it appears on the page:

Select the tasks to be Performed

Check Resources
Check Snippets
Check Plugins

Verbose Output

The JavaScript

This code checks or uncheck the checkboxes if the user clicks on one of the buttons:

function checkAll(checkEm) {
    var cbs = document.getElementsByTagName('input');

    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].type == 'checkbox') {
            if (cbs[i].name == 'my_form_tasks[]') {
                cbs[i].checked = checkEm;
            }
        }
    }
}


Try it. The JS code is included on this page (you’ll see it if you view the source of the page), so the buttons should work.

The code simply finds input tags on the page, and if their name is my_form_tasks[], sets their checked attribute to the value of the checkEm variable, which you recall from the two buttons’ onClick() events is either true or false. If it’s true, all checkboxes get checkmarks. If it’s false all checkboxes are cleared.

The code gets all input tags on the page, but it won’t touch any of them unless they have that name, so it will ignore the “Verbose” checkbox and any other checkboxes that might be on the page. It might be slightly faster to get the form itself and look for the checkboxes in it, but this code is plenty fast enough. The browser will have tokenized and indexed the page, so getting all the input tags will be quite fast.

Getting the Javascript Into the Page

There are two ways to do this. One is to simply put the JS code into the page content between script tags (as I’ve done with this page). The other is to put the JS code in a file, usually somewhere in the MODX assets directory, and add this line to the top of the Snippet that processes the form (or create another Snippet with just this code):

$modx->regClientStartupScript(MODX_ASSETS_PATH . 'path/to/js/file');

The Placeholders

You might be wondering what those placeholder tags are for. They allow the checkbox settings to be sticky. Whenever the user returns to the form, the checkboxes will be set the same way they were the last time they visited the page. In the version in this article, those placeholders will be removed by MODX since they are not set. The checkboxes will be set by the user, or by the JS code if the user clicks on one of the buttons.

In the following article I explain the technique for making the checkboxes sticky.


Bob Ray is the author of the MODX: The Official Guide and dozens of MODX Extras including QuickEmail, NewsPublisher, SiteCheck, GoRevo, Personalize, EZfaq, MyComponent and many more. His website is Bob’s Guides. It not only includes a plethora of MODX tutorials but there are some really great bread recipes there, as well.