基于jQuery实现超出最大选中数时自动取消最早选中的复选框

完整实现代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pricing-levels-3">
  <p><strong>(最多选择3个复选框，选第4个时自动取消最早选中的选项)</strong></p>
  <input class="single-checkbox" type="checkbox">1<br>
  <input class="single-checkbox" type="checkbox">2<br>
  <input class="single-checkbox" type="checkbox">3<br>
  <input class="single-checkbox" type="checkbox">4<br>
  <input class="single-checkbox" type="checkbox">5<br>
</div>

jQuery代码

// 维护选中复选框的顺序数组
let selectedOrder = [];

$('.single-checkbox').change(function() {
  const $current = $(this);

  if ($current.is(':checked')) {
    // 勾选时加入顺序数组
    selectedOrder.push($current);

    // 超过3个时，取消最早选中的项
    if (selectedOrder.length > 3) {
      const earliest = selectedOrder.shift();
      earliest.prop('checked', false);
    }
  } else {
    // 取消勾选时从顺序数组中移除对应项
    const removeIndex = selectedOrder.indexOf($current);
    if (removeIndex !== -1) {
      selectedOrder.splice(removeIndex, 1);
    }
  }
});

逻辑说明 #

1. 顺序跟踪：用selectedOrder数组记录用户选中复选框的先后顺序，确保能准确定位最早选中的项。
2. 勾选处理：用户勾选新复选框时，先将其加入数组；如果数组长度超过3，直接移除数组第一个元素（最早选中的）并取消它的勾选状态。
3. 取消处理：用户手动取消某个已选中的复选框时，将其从顺序数组中移除，不干扰其他选中项的状态。

优势 #

• 保留复选框自由操作特性：用户可随时勾选/取消任意选项，无强制限制
• 自动替换优化体验：选第4个时无需手动取消旧选项，系统自动完成替换
• 代码易扩展：只需修改数组长度判断值（比如把3改成2），就能调整最多选中数量

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