如何让 jquery 选择器在更改处理程序中看到更新的 dom

Question

我是 javascript 和 jQuery 的新手。我已经搜索了这个问题的答案，但没有找到答案，尽管我敢打赌这里有一些答案。因此，如果这是一个复制品，请提前致歉。

标记有 3 个 class 不同的复选框，和一个 class 相同的复选框。我想注意到在两个 classes 中的任何一个中选中的框数何时发生变化，或者更确切地说，当两个 classes 中的至少一个框被选中或未选中时发生转换。两个有趣的class分别命名为“professional”和“vendor”，共同的class是“account_type_checkbox”。

页面准备就绪后，我计算选中的“professional”和“vendor”框的数量：

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

这似乎工作正常。我在公共 class 中的复选框上有一个“change”事件处理程序，它在触发时执行相同的计数。但是当事件触发时，它获得与页面加载时相同的计数 - 即它没有看到更新的 DOM 和修改后的 checked 属性。

我已经为此在 http://jsfiddle.net/cm280s9z/1

上放置了一个 jsfiddle

有人可以帮我解决这个问题，and/or 解释为什么我的代码不能按我预期的方式工作？

Answer 1

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

使用 alert($(":checkbox:checked").length); 获取所有标记复选框的总和。

正如本帖中所指出的，还有其他几种方法可以做到这一点，例如通过类在复选框上进行操作： calculate the number of html checkbox checked using jquery

Answer 2

也许你会发现这个有用：http://jsfiddle.net/cm280s9z/6/

这是您所拥有内容的清理版本（并不是说它是有史以来最好的），显示了 :checked。

这段代码好的原因：

存储 jQuery 对象复选框意味着它不必每次都重新jquery-对象化它。
在 jQuery 上，某些 [模糊或冗长] 选择器抓取对象可能会更加费力。抓住这个 class 意味着它也会更具体。我们可以使用 .filter 进一步过滤掉 checked。额外提示：如果遍历 DOM，我喜欢抓取一个相当独特的容器并使用 .find() 来帮助我找到后代。
函数可以使您的工作井井有条。
评论是你的朋友。

希望对您有所帮助！

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();
    });
});

如何让 jquery 选择器在更改处理程序中看到更新的 dom

How to get jquery selector seeing updated dom in change handler

javascript

jquery

events