Treehouse

Quickboxes

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.

Download Debut Article Example Usage

 

Plugin Code (Version 1.0)

var Quickboxes = 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; });
	}
});


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

Options

  • elements: (defaults to all checkbox elements) the collection of input boxes to apply the plugin to
  • mode: (defaults to "toggle")one of three options: toggle, check, or uncheck (defaults to 'toggle')

Code Revisions & Bug Fixes

None.