SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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:

    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
    Last edited by tlacaelelrl; Apr 21, 2012 at 10:11. Reason: Changed the function to add a switch statement
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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/
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  5. #5
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'))
    ));
    });
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  6. #6
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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');
        });
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  8. #8
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post

    Code JavaScript:
    $('#todoSelectAll').on('click', function() {
        $('.todoGA').attr('checked', function() {
            return !$(this).is(':checked');
        });
    });
    Thanks...
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  9. #9
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    Code JavaScript:
    $('#todoSelectAll').on('click', function() {
        $('.todoGA').attr('checked', function() {
            return !$(this).is(':checked');
        });
    });
    Quote Originally Posted by muazzez View Post
    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?
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  10. #10
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    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."
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, thank you for the clarification!
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •