Making a Toggle All Checkbox
You’ve seen them on other sites. When you have a long list of checkboxes, and you know you need to check them all. Thankfully, the developer gave you a “Toggle All” and “Check All” box at the top, so you don’t have to check each individual box. They don’t make or break an application, but they subconsciously make a better user experience. It’s really easy to get this working, and I can show you how to do it in Mootools, Prototype, and even without any framework, since if this is the only thing you need in Javascript, you need the overhead of a framework to do this.
I recently had to make a permissions page for a CMS, allowing users to set the permissions of new users for various features. Adding a way to toggle all options would be nice, because there’s a lot of options! Here it is with Mootools goodness, thought for the CMS I wrote it with Prototype:
Mootools
$('toggler').addEvent('click',function (e) { var toggle = $('toggler').checked; $$('#formId input[type=checkbox]').each(function(check) { check.checked = toggle; }); });
I’ve added an event listener to the checkbox with id “toggler”, listening for a click. When clicked, I store its checked state (true if checked, false if unchecked), and then set every other checkbox to the same state. This way of doing it, as opposed to just using check.checked = !check.checked (using NOT to pick the opposite state), prevents double toggling the Toggler checkbox. Here it is originally in Prototype:
Prototype
$('toggler').observe('click',function (e) { var toggle = $('toggler').checked; $$('#formId input[type=checkbox]').each(function(check) { check.checked = toggle; }); });
The only difference between Mootools and Prototype is the attachEventListener implementation: Mootools uses addEvent, Prototype uses observe.
And like I said in the beginning, if this is your only need of Javascript (unlikely), I recommend not bogging down the page with a framework, and use native Javascript. It’s really not hard. Here it is:
Native
var toggleFunction = function() { var toggle = document.getElementById('toggler').checked; var inputs = document.getElementsByTagName('input'); for(var i = 0; i \< inputs.length \< i++) { if(inputs[i].type == 'checkbox') { inputs[i].checked = toggle; } } } //If Good Browser if(window.addEventListener) { document.getElementById('toggler').addEventListener('click',toggleFunction(),false); // If IE } else if (window.attachEvent) { document.getElementById('toggler').attachEvent('onclick',toggleFunction()); }
If you’re used to only using frameworks, this looks like more work. And it is, slightly. But if you’ve done any kind of programming, you realize it’s just a simple for loop, used normally.
Of course, this does show-off some of the things frameworks do for you. The framework will check the type of input for me, instead of me having to write an if statement. It also gives you a cross-browser addEvent function, instead of having to check for browser inconsistancies.
