为何无法限制复选框选中数量？请排查我的代码问题

首先，你的代码根本没把事件绑定到复选框上！因为你把jQuery代码放在了<head>里，这时候浏览器还没渲染出页面里的复选框元素——代码执行时，$('input.ko_chk')找不到任何元素，自然绑定的change事件完全没起作用。原示例里的代码是等DOM全部加载完成后才执行绑定的，你漏掉了这个关键步骤。

其次，你用$(this).siblings(':checked').length计算选中数量的逻辑有问题：这个方法只会统计当前元素的兄弟里被选中的数量，不包含当前元素自己。这种统计方式会出现逻辑漏洞，比如当你先选中第4个复选框，再依次选前三个时，统计的选中数量会遗漏当前操作的元素，导致限制逻辑失效。

修正方案 #

分两步调整你的代码：

1. 确保代码在DOM加载完成后执行

要么把script标签移到<body>的最后，要么用$(document).ready()包裹逻辑，保证代码执行时所有复选框都已被渲染。

2. 修正选中数量的计算逻辑

统计所有.ko_chk类复选框的选中总数，而不是只统计当前元素的兄弟。

修正后的完整代码 #

<html>
<body>
  <input type="checkbox" class="ko_chk" name="first" value="1"><br>
  <input type="checkbox" class="ko_chk" name="second" value="2"><br>
  <input type="checkbox" class="ko_chk" name="third" value="3"><br>
  <input type="checkbox" class="ko_chk" name="fourth" value="4">

  <!-- 先引入jQuery，再写业务逻辑 -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var limit = 3;
    // 等待DOM加载完成后再绑定事件
    $(document).ready(function() {
      $('input.ko_chk').on('change', function(evt) {
        // 统计所有选中的目标复选框数量
        var checkedTotal = $('input.ko_chk:checked').length;
        if (checkedTotal > limit) {
          // 如果超过限制，取消当前复选框的选中状态
          this.checked = false;
        }
      });
    });
  </script>
</body>
</html>

和原示例的核心差异 #

• 原示例做了DOM就绪的处理，确保事件能绑定到存在的元素上，你遗漏了这一步；
• 原示例统计的是所有目标复选框的选中总数，而你的siblings统计方式逻辑不严谨，会遗漏当前操作的元素。

内容的提问来源于stack exchange，提问作者fishmong3r