根据复选框选择数量动态显示不同反馈信息的教程

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quiz">
  <div class="quiz__item">
    <h3>请选择所有选项：</h3>
    <div class="check-group">
      <label class="checkbox"><input type="checkbox">选项 1</label><br />
      <label class="checkbox"><input type="checkbox">选项 2</label><br />
      <label class="checkbox"><input type="checkbox">选项 3</label><br />
      <label class="checkbox"><input type="checkbox">选项 4</label><br />
      <label class="checkbox"><input type="checkbox">选项 5</label>
    </div>

    <a href="#" class="btn">提交答案</a>

    <div class="quiz__feedback">
      <!-- 当所有复选框都被选中时显示此消息 -->
      <p class="hide" data-feedback="all">恭喜！您已选中所有选项。</p>
      <!-- 当选中数量不为全部时显示此消息 -->
      <p class="hide" data-feedback="some">请注意，您并未选中所有选项。</p>
    </div>
  </div>
</div>

.hide {
  display: none; /* 初始隐藏元素 */
}

.check-group,
.btn {
  margin-bottom: 24px; /* 为复选框组和按钮添加下边距，改善布局 */
}

$(document).ready(function() { // 确保DOM加载完成后再执行JS
    $(".quiz__item .btn").click(function (e) {
        e.preventDefault(); // 阻止按钮的默认跳转行为，特别是当按钮是<a>标签时

        // 1. 获取当前测验项中被选中的复选框数量
        // `$(this).parents(".quiz__item")` 向上遍历找到父级测验项
        // `find('input:checked')` 在该测验项内查找所有被选中的复选框
        // `.length` 获取选中复选框的数量
        let selectedCheckboxesCount = $(this).parents(".quiz__item").find('input:checked').length;

        // 2. 隐藏所有反馈消息，确保每次只显示一个
        $(this).parents(".quiz__item").find(".quiz__feedback p").hide();

        // 3. 根据选中数量显示不同的反馈消息
        // 假设总共有5个复选框，如果选中数量等于5，则表示全部选中
        const totalCheckboxes = 5; // **重要：根据实际复选框数量调整此值**

        if (selectedCheckboxesCount === totalCheckboxes) {
            // 选中所有复选框时，显示 `data-feedback="all"` 的消息
            $(this).parents(".quiz__item").find(".quiz__feedback p[data-feedback='all']").slideDown(200);
        } else {
            // 选中数量不为全部时，显示 `data-feedback="some"` 的消息
            $(this).parents(".quiz__item").find(".quiz__feedback p[data-feedback='some']").slideDown(200);
        }
    });
});