Question

我遇到了问题。我有一些复选框。我想立刻选择它们，但计算结果是错误的。当如果我使用firefox，歌剧然后确定但是当我使用crome，safari，IE然后它给了我一个错误的结果。为什么？请帮帮我。

我在这里设置了一些代码：

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
      $(document).ready(function () {
        $("input[type=checkbox]").each(function () {
          $(this).change(updateCount);
        });

        updateCount();

        function updateCount () {
          var count = $("input[type=checkbox]:checked").size();

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });

Answer 1

首先，.size() is deprecated.改为使用length属性。

其次，您可能希望将复选框限制为具有.case类的复选框：

var count = $("input[type=checkbox].case:checked").length;

第三，编写代码的方式，您应该在updateCount()事件而不是click事件上调用change，并且您不需要匿名函数：

$("input[type=checkbox]").click(updateCount);

我保存了你的jsfiddle的新版本：http://jsfiddle.net/kdEmH/8/

Answer 2

单击是捕获不更改的正确事件。另外你为什么要迭代绑定。用以下内容替换您的document.ready：

$(document).ready(function () {
    $("input").bind('click', function () {
      updateCount();
    });

    updateCount();

    function updateCount () {
        var count = $( "input:checked" ).length;

      $("#count").text(count);
      $("#status").toggle(count > 0);
    };
  });

Answer 3

就像Angela所说，你应该正在监听变更事件，在复选框的值发生变化后，不保证会调用点击。此外，该值可能会因为其他内容而发生变化，例如标记到字段中以及触及空间。同样重要的是要意识到在以编程方式设置复选框的值之后不会触发更改事件，因此在以编程方式设置值时必须自己调用updateCount，因此，没有理由将updateCount绑定到单击，只是在处理任何复选框的更改事件时调用它。

这是一个完整的代码片段，就像你所拥有的那样，除了我始终保持计数可见

$(function(){
    function updateCount () {
        var count = $("input.case[type=checkbox]:checked").length;
        $("#count").text(count);
    }
    updateCount();

    // add multiple select / deselect functionality
    $("#selectall").change(function() {
        $('.case').prop('checked', this.checked);
        updateCount();
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").change(function(){
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
        updateCount();
    });
});

当我点击全选复选框时为什么计数错误

3 个答案: