Jquery select all based on class

Hello all!
I am working in a function that selects all check-boxes based on a class and sets their status to checked but nothing happens, jQuery is loading properly because other functions work fine, also firebug throws no errors my function is this:


$('#todoSelectAll').click(function(){
	$('.todoGA').each( function() {
		switch ( $(this).attr('checked') ) {
			case 'true':
				$(this).attr('checked', false);
			break;
			case 'false':
				$(this).attr('checked', true);
			break;
			default:
			break;
		}
	});
});

todoSelectAll is another checkbox, todoGA is the class applied to a group of checkboxes, I have been having trouble selecting all elements with a specified class, can someone help me figure out what is wrong with my syntax

I ended up doing this:


$('#todoSelectAll').click(function(){
		$('#todoTbody input[type=checkbox]').each( function() {
			if ( $(this).attr('checked') != 'checked' ) {
				$(this).attr('checked', 'checked')
			} else {
				$(this).attr('checked', false)
			}
		});
	});

I don’t know if jQuery has a problem selecting check-boxes by using the class name or it just won’t select them in my current environment, it might have to do with my Joomla since it also loads Mootools but I am not sure, I will do some tests without Mootools and post here the results

I think you were over thinking your code a little bit as you have made it more complex then it needed to be, so you can see what i mean see the following link.

That does work but it does not really toggle the selection it just checks or unchecks all checkboxes based on the state of the toggle checkbox, what if I wanted to iterate over each and do it based on a case situation, if checked uncheck and if unchecked check, although I did overdo because I could not iterate based on the class name, now that I see your code I did this: http://jsfiddle.net/UC7ex/ thank you for your help

If I understand
The following code is working in Firefox 4.0b9

 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
</head>
<body>
<input type="checkbox" class="todoGA">
<input type="checkbox" class="todoGA">
<input type="checkbox" class="todoGA">
<input type="checkbox" class="todoGA">
<input type="checkbox" class="todoGA">
<input type="checkbox" class="todoGA">

<br><br>

Toggle Checkboxes: <input type="checkbox" id="todoSelectAll" >

<script type="text/javascript">

$('#todoSelectAll').on('click', function() {
    $('.todoGA').attr('checked', $(this).is(':checked'));
});
</script>
</body>
</html>

  
$('#todoSelectAll').on('click', function() {

var t = $('.todoGA');

for(var i=0; i<t.length; i++) {

$(t[i]).attr('checked', !$(t[i]).is(':checked'))

}

});

  
$('#todoSelectAll').on('click', function() {

    $('.todoGA').each(function() (
   $(this).attr('checked', !$(this).is(':checked'))
));
});

  
$('#todoSelectAll').on('click', function() {

    $('.todoGA').each(function() (
   $(this).attr('checked', !$(this).is(':checked'))
));
});

[/QUOTE]

I really like this one last, very simple and effective, thank you.

Rather then using the each method you can simply target the checkbox elements and return the :checked status.

$('#todoSelectAll').on('click', function() {
    $('.todoGA').attr('checked', function() {
        return !$(this).is(':checked');
    });
});

Thanks…

Well, this two provide the same result, I am assuming that Chris provided the alternate because of efficiency so how would the two compare?

Check this performance test that I ran in both code snippets,

http://jsperf.com/checkboxes-toggle-selection-test

I posted both code snippets and the results show that performance wise the code by Muazzez is faster although not by much, and having firebug disabled shows Chris snippet faster.

Performance tests tend to be useless where in reality you’re doing something only a few times.

More important is how easy it is to understood what the code is doing, and not that it shaves a few microseconds off of the time.

I usually don’t run any performance tests but was wondering why Chris would offer the function as a better option than each, besides being better performance what else is there, also I agree with you it is better to understand what the code does

That’s because when setting attributes, they are set to all of the matched elements, so the each() method just ends up being an unnecessary wrapper.

From the .attr(attributeName, value) docs: “Description: Set one or more attributes for the set of matched elements.”

Okay, thank you for the clarification!