Page 1 of 1
jQuery in a function
Posted: Wed Oct 24, 2007 4:58 pm
by alex.barylski
I have the following snippet I borrowed from a blog on checking checkboxes...
Code: Select all
$(document).ready(function()
{
$("#email_all").click(function()
{
var checked_status = this.checked;
$("input[@id=email]").each(function()
{
this.checked = checked_status;
});
});
});
I have two questions:
1) How can I change this code so I can invert the current selection, rather than check/uncheck all at once
2) How can I put this code into a function so I can reuse the code above by simply passing the
email_all and
email
I put it into a function and called the function in the
onclick of the checkbox which is used to select/unselect checkboxes but nothing happened, I assumed because the first click() in the code above is being called inside it self it's causing an issue???
Any ideas, suggestions would be great, thanks.

Posted: Wed Oct 24, 2007 5:23 pm
by feyd
Posted: Wed Oct 24, 2007 5:28 pm
by alex.barylski
I tried that already...It works except the first time...the first time you click the checkbox nothing happens...when you click it a seoncd time...then all checkboxes are checked...
I can't be bothered to work out why that is happening...I've solved that same problem countless times in the past with just my own JS coding...I'm tired of that...thats why I switched to jQuery...
Now I'd really like to find a way ot make this code more reusable via function so I can store all my general jQuery functions in a general.js
I think I've figured it out.

Posted: Wed Oct 24, 2007 7:02 pm
by Kieran Huggins
xhtml doesn't allow multiple elements with the same ID. You can use the name and an attribute selector to make it more semantic.
Code: Select all
$(function(){ // shortcut syntax for document.ready
$("#invert").click(function(){
$("input[@name^=email]").each(function(){
this.checked = !this.checked;
});
return false; // don't actually follow the link
});
$("#all_or_nothing").click(function(){
var any_unchecked = false;
$("input[@name^=email]").each(function(){
if(!this.checked) any_unchecked = true;
});
$("input[@name^=email]").attr('checked',any_unchecked);
return false; // don't actually follow the link
});
});
Code: Select all
<a id="invert" href="#">invert</a> |
<a id="all_or_nothing" href="#">all/none</a>
<input type="checkbox" name="email_1"/>
<input type="checkbox" name="email_2"/>
<input type="checkbox" name="email_3"/>
<input type="checkbox" name="email_4"/>
<input type="checkbox" name="email_5"/>
Posted: Wed Oct 24, 2007 9:29 pm
by Christopher
Kieran, that is a thing of beauty.
I think you should start a "How can I do this with jQuery?" thread and give people cool solutions like this.
Posted: Wed Oct 24, 2007 9:39 pm
by alex.barylski
Thanks Kieran,
I solved it slightly differently. I wrapped each checkbox in a <a> tag with the fixed name. The basically I use jQuery to find the <a> with a known name and then find it's child...
Code: Select all
$("a[@name=check_wrapper]").children().each(function()
{
this.checked = checked_status;
});
This of course assumes that checkboxes will be the only child inside the anchors with name=check_wrapper but in my case that isn't a problem. It validates against W3C and everything works so I am happy.
Thanks again.

Posted: Wed Oct 24, 2007 11:24 pm
by Kieran Huggins
thanks
I really do love the haiku feel of jQuery, it makes DOM scripting feel like an art form.
@hockey: you could replace
Code: Select all
$("a[@name=check_wrapper]").children()
with
Code: Select all
$("a[@name=check_wrapper] input[@type=checkbox]")
for a more precise selection by CSS, but I don't see why you're wrapping a checkbox in an anchor in the first place. A <label/> maybe, but <a/>?
I'm happy if you're happy!
Posted: Wed Oct 24, 2007 11:52 pm
by alex.barylski
I hate working with the DOM. Not so much the DOM as I do the cross browser problems that arise. Of course these days I bet the DOM is almost standardized across the board, but still...
jQuery is nice, yes...
As for the <label> over the <a>...probably makes more semantic sense...but I think I tried that and it failed XHTML validation because label doesn't support a "name" attribute???
I'm sure I tried that but maybe not...

Posted: Thu Oct 25, 2007 12:04 am
by Kieran Huggins
Labels have a "for" attribute that ties them to the input they're for. When you click the label, it toggles the checkbox it's "for". I usually just wrap my inputs in labels instead, which has the same effect IIRC.
I would use the (partial?) name of the checkboxes to select them, as you're probably going to want to extend the behavior to all the inputs like so:
Code: Select all
<input type="checkbox" name="delete[23]" />
Code: Select all
$('input[@type=checkbox][@name^=delete]').each(/*...etc...*/);
That keeps everything nice and semantic and keeps you out of CSS hell later with all those extra containers.
The DOM is still hell, but jQuery abstracts just above the problem areas
