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.