This jQuery plugin handles 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. Note that if a row contains clickable elements such as
links or buttons, they should have a click handler which returns false
if you do not want the clicks to be passed through to the checkboxes.
Code:
$('#demo1 div.checkbox').shiftcheckbox({ checkboxSelector: ':checkbox', selectAll: $('#demo1 .all'), // 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