多选复选框触发特定Div显示异常问题排查

核心问题 #

你的代码有两个关键问题导致只有选中周一才会生效：

1. 事件绑定错误：$(sessionMonday, sessionTuesday, sessionWednesday, sessionThursday, sessionFriday).change(...) 这种写法不符合jQuery语法规则——它只会把sessionMonday作为主选择器，后面的变量会被当作上下文参数，最终只有周一的复选框绑定了change事件，其他工作日复选框改变时完全不会触发逻辑。
2. 冗余的判断逻辑：原代码逐个判断工作日复选框的选中状态，不仅代码冗余，还容易因为事件绑定遗漏出现判断失效的情况。

修复方案 #

我们可以通过统一类选择器简化代码，同时修正事件绑定和逻辑判断，让代码更健壮：

第一步：优化HTML（给复选框加分类类名）

给周一到周五的复选框添加weekday类，周六周日添加weekend类，方便后续jQuery批量选择：

<div class="form-check">
  <input class="form-check-input weekend" type="checkbox" value="" id="sessionSunday">
  <label class="form-check-label" for="sessionSunday"> Sunday </label>
</div>
<div class="form-check">
  <input class="form-check-input weekday" type="checkbox" value="" id="sessionMonday">
  <label class="form-check-label" for="sessionMonday"> Monday </label>
</div>
<!-- 周二到周五的input都添加weekday类，周六添加weekend类 -->

第二步：修改jQuery代码

简化变量定义，正确绑定事件，优化逻辑判断：

jQuery(function($){ 
  // 用类选择器批量获取元素，减少冗余变量
  var sessionDays = $('.sessionDays');
  var weekdayChecks = $('.weekday');
  var weekendChecks = $('.weekend');
  var sessionMorning = $('.sessionMorning');
  var sessionEvening = $('.sessionEvening');

  // 初始隐藏所有需要控制的区域
  sessionEvening.hide();
  sessionMorning.hide();
  sessionDays.hide();

  // 会话类型选择逻辑保留，新增清空时隐藏时段的处理
  $("#selectSessionType").change(function(){
    if( !$(this).val() ) {
      sessionDays.hide();
      sessionMorning.hide();
      sessionEvening.hide();
    } else {
      sessionDays.show();
    }
  }).change();

  // 给所有日期复选框绑定change事件，确保任何一个日期变动都触发逻辑
  $('.sessionDays .form-check-input').change(function() {
    // 简洁判断是否有工作日/周末被选中
    var hasWeekdayChecked = weekdayChecks.is(':checked');
    var hasWeekendChecked = weekendChecks.is(':checked');

    if (hasWeekdayChecked) {
      // 有工作日选中，显示早晚时段
      sessionMorning.show();
      sessionEvening.show();
    } else if (hasWeekendChecked) {
      // 仅周末选中，只显示早时段
      sessionMorning.show();
      sessionEvening.hide();
    } else {
      // 无日期选中，隐藏所有时段
      sessionMorning.hide();
      sessionEvening.hide();
    }
  });
});

关键修改说明 #

1. 事件绑定范围修正：通过.sessionDays .form-check-input选中所有日期复选框，确保任何一个日期的选中状态变动都会触发逻辑。
2. 逻辑简化：用weekdayChecks.is(':checked')直接判断是否有任意一个工作日被选中，替代逐个判断的冗余写法，同时避免遗漏。
3. 边界场景处理：在会话类型清空时，同步隐藏时段区域，避免出现日期区域隐藏但时段残留显示的问题。

这样修改后，完全符合你的需求：选中任意工作日时显示早晚时段，选中周六/周日时仅显示早时段，所有日期取消选中后隐藏所有时段。

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