MooTools dwCheckboxes Plugin

By  on  

Update / Fix: The checkboxes will no longer toggle when the "mouseup" event doesn't occur on a checkbox.

Every morning I wake up to a bunch of emails in my Gmail inbox that I delete without reading. I end up clicking so many damn checkboxes that my finger damn near falls off. With that in mind, I've created the dwCheckboxes plugin, a MooTools-based class that allows users to click down on a checkbox and drag their mouse over other checkboxes to check or uncheck numerous checkboxes within one click.

The MooTools JavaScript

var dwCheckboxes = new Class({
	
	//implements
	Implements: [Options],
	
	//options
	options: {
		elements: 'input[type=checkbox]',	//checkboxes to use
		mode: 'toggle'								//toggle|check|uncheck
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//prevent drag start in IE
		document.ondragstart = function () { return false; }
		//ensure that the elements are a Element
		this.options.elements = $$(this.options.elements);
		//manage the checkbox actions
		this.manage();
	},
	
	//a method that does whatever should be done
	manage: function() {
		var active = 0;
		this.options.elements.each(function(el) {
			el.addEvents({
				'mousedown': function(e) {
					e.stop();
					active = 1;
					el.checked = !el.checked;
				},
				'mouseenter': function(e) {
					if(active === 1) {
						el.checked = ('toggle' == this.options.mode ? !el.checked : 'check' == this.options.mode);
					}
				}.bind(this),
				'click': function(e) {
					el.checked = !el.checked;
					active = 0; 
				}
			});
		}.bind(this));
		var label = $$('label[for=' + el.get('id') + ']');
		if(label.length) {
			label[0].addEvent('click',function() {
				el.checked = !el.checked;
			});
		}
		window.addEvent('mouseup',function() { active = 0; });
	}
});

There are two options for this mall plugin:

  • elements: the collection of input boxes to apply the plugins for (defaults to all checkboxes).
  • mode: one of three options: toggle, check, or uncheck (defaults to "toggle")

The MooTools Usage

//when the DOM is ready to go
window.addEvent('domready',function() {
	var togglers = new dwCheckboxes({ elements: $$('.toggle'), mode: 'toggle' });
	var checked = new dwCheckboxes({ elements: $$('.checked'), mode: 'check' });
	var unchecked = new dwCheckboxes({ elements: $$('.unchecked'), mode: 'uncheck' });
});

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    WebKit Marquee CSS:  Bringin’ Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Discussion

  1. Nice work, one problem I see though is that in FF3/Safari 3/Chrome when I click on a checkbox then drag down the list to select more and then release, everytime I mouse over the check boxes in that group they still become checked/unchecked.

    Opera/IE7 look to work as intended.

  2. @Benjamin Sterling: Good catch — I didn’t do a post-mouseup hover when testing the toggle functionality. Looking over the code, I don’t see the issue but I’m going to address it ASAP.

  3. Just an idea. Like setting visibility to layers in photoshop. If you make a first layer visible, then all the other layer that you hover on will get the same state.

    So, difference would be that the toggle would not inverse the state of each and every checkbox but only follow the first state when we clicked.

    Example: If 2nd checkbox is checked and others are not. When i click on the first checkbox and drag. I end up with all of them checked but the 2nd one unchecked.

    I hope you understood what i mean, i wanted to make it as short as possible.

  4. Clever. What advantage does this have over shift click?

  5. Now that’s an excellent class!

    Just to note: remove the console.log‘s!

  6. @Ryan: Thanks

    @Benjamin Sterling: Fixed that issue. We’re all good now.

  7. It should work on the labels as well. And there should be a tooltip or something, maybe just a yellow notice box on the side, to alert the user of this, since it’s unexpected behavior.

  8. theBagg

    What would be better would be a noticeable graphical drag and highlight box, that when dragged over labels and checkboxes it performs the function. It took me a while to actually work out you have to hit the checkbox first. Very clever though.

  9. Nice work (as usual).

    1) Regarding the comment above about errant console log statements, might I suggest the Clientcide dbug plugin? It’s super tiny, and it insulates you from accidentally publishing code with log statements. It’s never good to to leave a bunch of log statements in code, but every now and then we all miss one sooner or later. dbug makes these not throw errors in browsers without firebug.

    2) Just a little nit-pick, but its generally considered a convention in JavaScript to use upper case names for any function that is meant to be used as a constructor. I don’t know if you do this elsewhere in your code, but it’s a big help for anyone using your stuff. It’s all too easy to leave off the “new” in front of a function that isn’t.

    Sorry, don’t mean to nag…

  10. @Aaron Newton: Thanks for the tip and thank you for your work with Moo!

  11. adamnfish

    Fredrik Bränström says:

    It should work on the labels as well.

    I agree. That was the first thing i tried and I was surprised when it didn’t work. I rarely click on the actual checkbox unless I’m forced to (if the for attribute isn’t set)

  12. I use prototype, not MooTools. Here is a copy with fewer options, but for prototype.

    http://pastie.org/532109

    Thanks, David.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!