jQuery in a function

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

jQuery in a function

Post 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. :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

this.checked = !this.checked
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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. :)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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"/>
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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. :)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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!
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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... :)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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 :-)
Post Reply