求助：实现点击按钮时根据复选框全选状态显示不同反馈

你可以修改现有jQuery代码，通过统计选中复选框的数量来决定显示对应反馈信息，无需依赖按钮的data-属性。以下是具体实现：

修改后的JavaScript代码 #

$(".quiz__item .btn").click(function (e) {
    // 阻止链接默认跳转行为
    e.preventDefault();
    
    // 获取当前测验项容器
    const $quizItem = $(this).parents(".quiz__item");
    // 统计选中的复选框数量
    const checkedCount = $quizItem.find(".check-group input[type='checkbox']:checked").length;
    // 获取总复选框数量
    const totalCheckboxes = $quizItem.find(".check-group input[type='checkbox']").length;
    
    // 先隐藏所有反馈信息
    $quizItem.find(".quiz__feedback p").addClass("hide");
    
    // 根据选中数量判断显示目标反馈
    let $targetFeedback;
    if (checkedCount === totalCheckboxes) {
        $targetFeedback = $quizItem.find(".quiz__feedback p.true");
    } else {
        $targetFeedback = $quizItem.find(".quiz__feedback p.false");
    }
    
    // 显示目标反馈并添加滑动动画
    $targetFeedback.removeClass("hide").slideDown(200);
});

完整代码示例 #

HTML

<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="false hide">你选中了0-4个选项，请尝试选中所有选项！</p>
      <p class="true hide">恭喜你选中了所有选项！</p>
    </div>
  </div>
</div>

CSS

.hide {
  display: none;
}

.check-group,
.btn {
  margin-bottom: 24px;
}

关键改动说明 #

• 移除按钮data-属性依赖：不再从按钮提取反馈内容，直接使用HTML中预定义的两个反馈段落
• 统计复选框状态：通过:checked选择器统计选中数量，与总数量对比判断结果
• 重置反馈显示状态：每次提交先隐藏所有反馈，再显示对应结果，避免多反馈同时展示
• 保留交互动画：沿用原代码的slideDown效果，保持一致的用户体验

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