Question

我是javascript和jQuery的新手。我已经搜索了这个问题的答案，但没有运气，不过我打赌这里有一些。如果这是一个复制品，请提前道歉。

Markup有3个不同类的复选框，以及一个共同的类。我想要注意当两个类中的任何一个中检查的框的数量发生变化时，或者更确切地说当被检查或未选中的两个类中的至少一个框之间存在转换时。这两个有趣的类名为“professional”和“vendor”，共同的类是“account_type_checkbox”。

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

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

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

我在http://jsfiddle.net/cm280s9z/1

处放了一个jsfiddle

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

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/

这是一个清理过的版本（不是说它是有史以来最好的版本），显示：已检查。

此代码良好的原因：

存储jQuery对象复选框意味着它不必每次都重新jquery-objectify。
通过某些[模糊或冗长]选择器抓取对象在jQuery上可能会更加费劲。通过这个类抓取意味着它也会更加具体。我们可以使用.filter进一步过滤掉。额外提示：如果遍历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

2 个答案: