JavaScript Checkboxes - click & drag to highlight 'em all!
With jQuery, it becomes possible for people to make much simpler and more intuitive user interactions with controls on the Web. I'm sure many people have had the problem where they want to select, say, half of the checkboxes on a page, or maybe all the ones within just a particular value or range. It's time-consuming and error-prone to click them all, and the "Select All" button just won't buy much time savings.
Thus far, I haven't really seen a good implementation that solves this problem, so I rolled my own. Please use it in your own designs! This is something that needs to be shared freely for the good of humanity. :-P You can do this completely in JavaScript with dynamically-generated checkboxes or even ones you have pre-existing. Here goes:
Thus far, I haven't really seen a good implementation that solves this problem, so I rolled my own. Please use it in your own designs! This is something that needs to be shared freely for the good of humanity. :-P You can do this completely in JavaScript with dynamically-generated checkboxes or even ones you have pre-existing. Here goes:
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var mouseDown = 0;
$(document).ready(function() {
$("body").mousedown(function() {
mouseDown = 1;
});
$("body").mouseup(function() {
mouseDown = 0;
});
// If you had a function to dynamically make checkboxes, it would start here {
// Then you would also indent this next jQuery mouseenter handler
$('.messageCheckParent').mouseenter(function() {
if (mouseDown) {
checkbox = $(this).find("input").first();
checkbox.attr('checked', !( checkbox.attr('checked') ));
}
});
// } Now your special dynamic generator function ends
});
</script>
<html><etc ...>
<!-- Or if you prefer to statically generate your HTML... -->
<table>
<tbody>
<tr>
<td class="messageCheckParent" id="cell1"><input class="messageCheck" id="checkBox1" type="checkbox" />
</td>
</tr><tr>
<td class="messageCheckParent" id="cell2"><input class="messageCheck" id="checkBox2" type="checkbox" />
</td>
</tr><tr>
<td class="messageCheckParent" id="cell3"><input class="messageCheck" id="checkBox3" type="checkbox" />
</td>
</tr>
</tbody>
</table>
</etc></html>
The best way to tie this all together is with the jQuery tablesorter plugin. With tablesorter, you can allow users to click on column headings, and the table will be sorted by all the values within. So if, for some reason, you ever had to check off all the names of the players whose teams went to the playoffs, you could sort the table by team name, then click & drag over all the checkboxes next to the right names.
The way the code is implemented here leaves a little to be desired, though. For instance, the first checkbox you click on won't actually get checked because mouseDown was 0 (false) when you entered it, and dragging out of a checkbox with the mouse down causes it not to become checked. The other undesirable action is if you drag the mouse down and then back up, the lowest checkbox that became checked won't get unchecked, but everything else as you drag back up will become unchecked. You're welcome to fix these flaws though, and post your fixes in the comments!
Nevertheless, this ought to save time, frustration, and repetitive motion syndrome in your users' fingers if you ever need to make a panel with lots of JavaScript checkboxes.
The way the code is implemented here leaves a little to be desired, though. For instance, the first checkbox you click on won't actually get checked because mouseDown was 0 (false) when you entered it, and dragging out of a checkbox with the mouse down causes it not to become checked. The other undesirable action is if you drag the mouse down and then back up, the lowest checkbox that became checked won't get unchecked, but everything else as you drag back up will become unchecked. You're welcome to fix these flaws though, and post your fixes in the comments!
Nevertheless, this ought to save time, frustration, and repetitive motion syndrome in your users' fingers if you ever need to make a panel with lots of JavaScript checkboxes.
Comments
Post a Comment