Sane checkbox handling for the browser
Module for sane checkbox handling. Create a bunch of html checkbox's and manage with EventEmitter events using checkbox state and value. Get a master checkbox which can check / uncheck all other checkboxes. The master checkbox automatically shows the proper indeterminant states. Can use with a single group, or multiple, each with their own master (each group is an event emitter instance). All checkboxes produced by a particular
checkmates instance automatically have their class set to the
checkmate function was instantiated with. The master has the additional CSS class of
var CheckMate = require'../.'var result = documentquerySelector'#result'checks = documentquerySelector'#checks'checkgroup =/** Build 5 checkboxes in a group*/var checker = CheckMate"groupA"var i checkvar checked = truefor i = 0; i < 5; i++check = checkercheckbox 'value-' + ichecksappendChildcheck/** Set Master*/var master = checkermaster 'value-master'checksinsertBeforemaster checkschildNodes0/** Set some eventhandling*/checkeron 'checked'resultinnerText = "checkbox " + checkValue + " checked"checkeron 'unchecked'resultinnerText = "checkbox " + checkValue + " unchecked"checkeron 'all-checked'resultinnerText = "all checkboxes checked"checkeron 'none-checked'resultinnerText = "all checkboxes unchecked"
group = Checkmate("groupID")
Create a checkbox part of group
checkbox = group.checkbox(value [, data])
value is a
String and is set to the html checkbox's value attribute.
data is an optional arbitrary data object you can normally pass around with event emitters.
Also checkbox html class is set to
Create a master checkbox for group
master = group.master(value [, data])
Master behaves as a checkbox but also if any checkboxes are set, the master is put into an indeterminate state. Clicking master in the indeterminate state will uncheck all checkboxes part of group
groupID. Clicking master when nothing is checked will check all checkboxes part of group
groupname including master. Master has the additional CSS class
Creating a new master just overwrites the old master - and is as of yet, untested.
Often you want to know what checkboxes are checked, so you use the
group.checked object. The keys are the
value parameter and the values are the checkmate checkbox elements.
group.checkmates is an array of all the checkmate checkboxes part of group
group.checkall() does what it says. It checks all non-master checkmate checkboxes.
group.uncheckAll() unchecks all checked checkmate checkboxes. (say that five time quickly)
group.removeAll() removes all checkboxes associated with group
groupID properly. That is, it unchecks them first, removing them from
group.checked before performing the remove on
npm install checkmates
Write your code then do
browserify main.js -o bundle.js
bundle.js in your
Just include it normally. Good for single-page apps