How to get jquery selector seeing updated dom in change handler

Question

I'm fairly new to javascript and jQuery . I've searched for answers to this question, but have had no luck, though I bet there are some in here. So advance apologies if this is a dup.

Markup has 3 checkboxes with different classes, and one class in common. I want to notice when the number of boxes checked in either of two classes changes, or rather when there is a transition between at least one box in two of the classes being checked or unchecked. The two interesting classes are named " professional " and " vendor ", and the class in common is " account_type_checkbox ".

When the page is ready, I count the number of checked " professional " and " vendor " boxes with:

jQuery("input.professional[checked='checked'], input.vendor[checked='checked']").length

This appears to work correctly. I have a " change " event handler on checkboxes in the common class that does the same count when it triggers. But when the event triggers, it gets the same count as it did on page load - ie it doesn't see the updated DOM with the modified checked attribute.

I've put a jsfiddle for this at http://jsfiddle.net/cm280s9z/1

Could someone please help me fix this, and/or explain why my code doesn't work the way I expected it to?

Answer 1

http://jsfiddle.net/cm280s9z/3/

Use alert($(":checkbox:checked").length); to get the sum of all marked checkboxes.

There are several other ways of doing this too, as pointed out in this thread, such as doing it by classes on a checkbox: calculate the number of html checkbox checked using jquery

Answer 2

Maybe you will find this useful: http://jsfiddle.net/cm280s9z/6/

Here's a cleaned up version (not saying it's the best ever) of what you had, showing the :checked.

Reasons why this code is good:

• storing the jQuery object checkboxes means it won't have to re-jquery-objectify it every time.
• grabbing objects by certain [vague or lengthy] selectors can be more strenuous on jQuery. Grabbing by this class means it'll be more specific as well. We can further filter out checked using .filter. Extra Tip: If traversing the DOM, I like to grab a container that's fairly unique and use .find() to help me get at the descendants.
• functions can bring some order and organization to what you're doing.
• comments are your friend.

Hope this helps!

---

var GLOB = GLOB || {};
jQuery(document).ready(function () {
    // Define
    var checkboxes = jQuery('.account_type_checkbox');
    var get_checkbox_count = function(checkboxes){
        return checkboxes.filter(':checked').length;
    };
    var do_business = function(){
       alert('transitioned to business'); 
    };
    var do_personal = function(){
       alert('transitioned to personal'); 
    };

    // Initialize    
    GLOB.business_count = get_checkbox_count(checkboxes);
    alert('GLOB.business_count = ' + GLOB.business_count);

    // Events
    checkboxes.change(function(){
        var cur_count = get_checkbox_count(checkboxes);
        var add_business = (cur_count > 0);
        var no_business = (GLOB.business_count < 1);
        // If any are selected it's business, where previously none were checked.
        var transition_business = (add_business && no_business);
        // If none are selected it's personal, if previously any were checked.
        var transition_personal = (!add_business && !no_business)
        if (transition_business)
            do_business();
        if (transition_personal)
            do_personal();
    });
});