为什么当我单击“全选”复选框时计数错误

why counting wrong when i click select all checkbox

本文关键字：复选框 错误 全选 单击 为什么      更新时间：2023-09-26

我遇到了一个问题。我有一些复选框。我想一次选择它们，但计数结果是错误的。当我使用火狐，歌剧那么好，但是当我使用crome，safari，IE时，它给了我一个错误的结果。为什么？请帮助我。

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

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

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

首先，.size()被弃用。请改用 length 属性。

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

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

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

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

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

单击是要捕获的正确事件，而不是更改。还有你为什么要迭代绑定。将文档替换为以下内容：

$(document).ready(function () {
    $("input").bind('click', function () {
      updateCount();
    });
    updateCount();
    function updateCount () {
        var count = $( "input:checked" ).length;
      $("#count").text(count);
      $("#status").toggle(count > 0);
    };
  });

就像 Angela 说的，你应该监听更改事件，不能保证在复选框的值更改后调用单击。此外，该值可能会因其他原因而更改，例如按 Tab 键进入字段和点击空格。同样重要的是要认识到，当您以编程方式设置复选框的值时，更改事件不会触发，因此在以编程方式设置值时必须调用 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();
    });
});
相关文章：