jquery select all based on class

**tlacaelelrl** · Apr 21, 2012 10:01

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:

Code:

$('#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

**tlacaelelrl** · Apr 21, 2012 11:04

I ended up doing this:

Code:

$('#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

**chris.upjohn** · Apr 22, 2012 05:15

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.

http://jsfiddle.net/xUxLD/

**tlacaelelrl** · Apr 22, 2012 12:05

Originally Posted by chris.upjohn

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.

http://jsfiddle.net/xUxLD/

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

**muazzez** · Apr 22, 2012 13:08

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

Code:

 
<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>

Code:

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

var t = $('.todoGA');

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

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

}

});

Code:

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

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

**tlacaelelrl** · Apr 22, 2012 15:00

Code:

  
$('#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.

**chris.upjohn** · Apr 22, 2012 20:19

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

Code JavaScript:

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

**muazzez** · Apr 22, 2012 20:48

Originally Posted by chris.upjohn

Code JavaScript:

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

Thanks...

**tlacaelelrl** · Apr 23, 2012 12:34

Originally Posted by chris.upjohn

Code JavaScript:

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

Originally Posted by muazzez

Code:

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

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

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

**tlacaelelrl** · Apr 23, 2012 12:52

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.

**paul_wilkins** · Apr 23, 2012 16:30

Originally Posted by tlacaelelrl

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.

**tlacaelelrl** · Apr 23, 2012 17:10

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

**paul_wilkins** · Apr 23, 2012 17:15

Originally Posted by tlacaelelrl

I usually don't run any performance tests but was wondering why Chris would offer the function as a better option than each

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."

**tlacaelelrl** · Apr 23, 2012 17:18

Okay, thank you for the clarification!

User Tag List

Thread: jquery select all based on class

Thread Tools

Display

jquery select all based on class

Bookmarks

Bookmarks

Posting Permissions