4

I have got a problem. I have some checkbox. I want to select them at once, but counting result is wrong. when If I use firefox, opera then ok but when i use crome,safari, IE then It gives me a wrong result. why? please help me.

http://jsfiddle.net/Taslimkhan/kdEmH/2/

some code I have set here:

    // 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);
        };
      });
4

3 回答 3

7

首先，.size()已弃用。改为使用该length属性。

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

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

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

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

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

于 2013-01-29T20:16:41.770 回答
1

点击是正确的事件来捕获不改变。还有你为什么要迭代绑定。将您的 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);
    };
  });
于 2013-01-29T20:20:53.523 回答
1

就像安吉拉说的，你应该在监听变化事件，在复选框的值发生变化后不能保证点击被调用。此外，该值可能会因其他事情而改变，例如在字段中使用制表符和点击空格。同样重要的是要意识到在以编程方式设置复选框的值后不会触发更改事件，因此在以编程方式设置值时必须自己调用 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();
    });
});
于 2013-01-29T20:35:55.790 回答