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:
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.