Learning jQuery, Day 14: Checkbox Quick Selection
I'm part of a select group of developers who have access to a secret web app called "Google Mail". Since you, doubtless, are unfamiliar with this software (I did say "select", after all), let me explain how it works.
The application actually lets me send and receive email. And my emails are saved in a table-like format with checkboxes next to each entry. I'm also part of a group of web users selected for our high intelligence to receive special offers through this email thing. Some of them are very valuable (as of this writing, I'm in negotiations with a Dr. Karl Mbutu on a special deal involving a large sum of money garnered from the Nigerian Oil Ministry), but some are less valuable. (If I can get $20 million from Karl, I really don't need Honorable Ashanti Nbektu's paltry $3 million. Sorry, Honorable: you have to step up your game.)
These less valuable offerings, of which I receive my fair share, I'd like to delete. And this secret app lets me do just that -- but not very efficiently. I have to click each entry and then press the "Delete" button. It's not bad when there are only a few checkboxes, but on a page with 20 or 30 of these, it's tedious.
Luckily pour moi, I've been reading a series of blog posts about "Learning jQuery" and have sharpened up my JavaScript and jQuery skills.
Here's my page with checkboxes on it:
<table id="mytable">
<tr>
<td><input type="checkbox" class="quick_select" name="a" value="a"></td>
<td>looking to get rich quick?</td>
</tr>
<tr>
<td><input type="checkbox" class="quick_select" name="b" value="b"></td>
<td>have no skills?</td>
</tr>
<tr>
<td><input type="checkbox" class="quick_select" name="c" value="c"></td>
<td>really lazy?</td>
</tr>
</table>
<p>No problem! Download our "Guide to Getting Rich Quick For People Who Are Really Lazy But Have No Discernible Skills"</p>
<cfinclude template="index.pgm">
And here's my kewl new "index.pgm" page:
<script type="text/javascript">
/* get the elements that have a class name of "quick_select"*/
$( '.quick_select' )
/* when someone mouses over one of these elements...*/
.mouseover( function()
{
/* turn the unchecked boxes ON and the checked boxes OFF */
$cb = $(this);
$cb.attr( 'checked', !($cb.attr( 'checked' )));
};
);
</script>
Mad skillz, undoubtedly. And surely worth a lot. And yet I'm giving this away free. Why? Well, with the 20 mill from the good doctor, it's just my way of "giving back".
I'll be in Tahiti if you need me.
Still, its quite cool to see them all select/deselect when you drag your mouse over. Just don't think it's very practical
I would welcome that ability. The hovering action could be limited to just the checkboxes. Or you could, alternately, change the action so that only if the SHIFT key were pressed would that rapid select be enabled. For me, the hassle of clicking ALL, then deselecting (which is what I have to do now) means that I don't clean my email to the degree I wish I did.
Glenn