This jQuery plugin can perform the following checkbox-related functions:
Click here to browse the plugin source on GitHub.
Click here to download the plugin.
Click (or Shift+click) on any part of a row to select the corresponding
checkbox. The rows are the div.checkbox
elements, and the
presence of the checkboxSelector
option tells the plugin
that it should handle click events on the rows and pass them to the
checkboxes.
Because the ignoreClick
option is set,
clicking on one of the links inside the rows will
not toggle the associated checkboxes.
Code (hide):
$('#demo1 div.checkbox').shiftcheckbox({ // Options accept selectors, jQuery objects, or DOM // elements. checkboxSelector : ':checkbox', selectAll : $('#demo1 .all'), ignoreClick : 'a', // The onChange function will be called whenever the // plugin changes the state of a checkbox. onChange : function(checked) { setInfoText( 'Changed checkbox ' + $(this).attr('id') + ' to ' + checked + ' programmatically'); } }); // If you also want to handle the user clicking on a // checkbox, use the jQuery .change() event. $('#demo1 :checkbox').change(function() { setInfoText( 'Clicked checkbox ' + $(this).attr('id') + ', checked=' + this.checked); });To disable the plugin:
$('#demo1 div.checkbox, #demo1 .all').off('.shiftcheckbox');
Nothing interesting has happened yet
For this demo, only the checkboxes pick up the Shift+click events and
not the labels attached to them. For usability purposes, it is better
to wrap both the label and the checkbox in a row element and specify
the checkboxSelector
option like the first demo does.
Code:
$('#demo2 :checkbox').shiftcheckbox();To disable the plugin:
$('#demo2 :checkbox').off('.shiftcheckbox');
This demo tests a couple of special cases: labels that contain the checkboxes they point to (whether or not they are row elements) and select-all checkboxes and links inside and outside of row elements.
Code:
$('#demo3 .row').shiftcheckbox({ checkboxSelector : ':checkbox', selectAll : '#demo3 .all' });To disable the plugin:
$('#demo3 .row, #demo3 .all').off('.shiftcheckbox');Select all 1