如何在文本框中显示下拉复选框的选中数量

问题描述 #

我希望在文本框中显示下拉复选框的选中数量，请问该如何实现？当前已编写了部分jQuery和HTML代码，但尚未完成功能，现有代码如下：

修改后的完整代码 #

HTML代码

<!doctype html>
<html lang="zh-CN">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <div class="dropdown">
    <input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="请选择水果" aria-expanded="false" data-bs-auto-close="outside" readonly>
    <div class="dropdown-menu p-0">
      <div class="list-group">
        <label class="list-group-item">
          <input class="form-check-input me-1 fruit-checkbox" type="checkbox" value=""> 苹果 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1 fruit-checkbox" type="checkbox" value=""> 香蕉 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1 fruit-checkbox" type="checkbox" value=""> 橙子 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1 fruit-checkbox" type="checkbox" value=""> 葡萄 </label>
      </div>
    </div>
  </div>

  <script>
    // 计算选中数量并更新文本框的函数
    function updateSelectedCount() {
      const checkedCount = $('.fruit-checkbox:checked').length;
      const totalCount = $('.fruit-checkbox').length;
      let displayText;

      if (checkedCount === 0) {
        displayText = "请选择水果";
      } else if (checkedCount === totalCount) {
        displayText = "全部水果已选中";
      } else {
        displayText = `${checkedCount}个水果已选中`;
      }

      $('.dropdown-toggle').val(displayText);
    }

    // 复选框状态改变时触发更新
    $('.fruit-checkbox').change(updateSelectedCount);

    // 页面加载完成后初始化一次，确保显示正确
    $(document).ready(updateSelectedCount);
  </script>
</body>

</html>

关键实现要点 #

• 精准选择器：给所有水果复选框添加统一类名fruit-checkbox，避免全局选择器影响页面其他复选框元素
• 动态计算逻辑：
  1. 获取当前选中的复选框数量checkedCount和总数量totalCount
  2. 根据数量判断显示文本：未选中时提示"请选择水果"，全选时显示"全部水果已选中"，部分选中时显示"X个水果已选中"
• 初始化触发：页面加载完成后主动调用一次更新函数，确保文本框初始状态与实际选中情况一致

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