jQuery Plugin To Select Multiple Check Boxes - shiftcheckbox

shiftcheckbox is a simple yet useful jQuery plugin that allows you to select / deselect multiple items from a group of checkboxes at once by using shift+click and / or selectAll functionality.

You might also like:

• jQuery Plugin For Checking All The Checkboxes
• Use Shift Selection For Checkboxes - Tshift
• Simple Form Check All Plugin For jQuery
• Simple jQuery Plugin To Select All The Checkboxes - select-all

Basic Usage:

1. Include jQuery library and jQuery shiftcheckbox script on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.shiftcheckbox.js"></script>

2. The html

<div class="demo" id="demo2">
<div>
<input type="checkbox" id="cb-2-1" />
<label for="cb-2-1">Demo 2 checkbox 1 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-2" />
<label for="cb-2-2">Demo 2 checkbox 2 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-3" />
<label for="cb-2-3">Demo 2 checkbox 3 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-4" />
<span class="label">Demo 2 checkbox 4 text (not a label)</span> </div>
<div>
<input type="checkbox" id="cb-2-5" />
<span class="label">Demo 2 checkbox 5 text (not a label)</span> </div>
<div>
<input type="checkbox" id="cb-2-6" />
<label for="cb-2-6">Demo 2 checkbox 6 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-7" />
<label for="cb-2-7">Demo 2 checkbox 7 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-8" />
<label for="cb-2-8">Demo 2 checkbox 8 label</label>
</div>
<div>
<input type="checkbox" id="cb-2-9" />
<label for="cb-2-9">Demo 2 checkbox 9 label</label>
</div>
</div>

3. Call the plugin

$('#demo2 :checkbox').shiftcheckbox();
});

4. Available options.

checkboxSelector : null, // checkboxSelector means that the elements we need to attach handlers to ($containers) are not actually checkboxes but contain them instead
selectAll  : null,
onChange   : null,
ignoreClick: null // Prevent selecting text by Shift+click

Change log:

2014-08-02

• Add and document ignoreClick option

---

This awesome jQuery plugin is developed by nylen. For more Advanced Usages, please check the demo page or visit the official website.