jQuery Multi Select Checkboxes Using Click and Drag - dragcheck

jQuery dragcheck is an useful jQuery plugin that allows you to click and then drag across checkboxes to check / uncheck them.

How to use it:

1. Include jQuery library and jQuery dragcheck plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="dragcheck.js"></script>

2. Create the html

<table>
<thead>
<th></th>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="1" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="2" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="3" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="4" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="5" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="6" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="7" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="8" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="9" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td><input type="checkbox" value="10" /></td>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
</tbody>
</table>

3. The javascript

<script>
$(window).load(function(){
$('table tbody').dragcheck({
container: 'tr', // Using the tr as a container
onSelect: function(obj, state) {
        obj.prop('checked', state);
    }
});
});
</script>

---

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