复选框勾选/取消时隐藏div与li元素的实现问题求助

核心思路是把所有状态判断整合到一个统一的处理函数中，让文本框输入、复选框状态变化时都触发这个函数，确保所有元素的显示/隐藏状态、按钮禁用状态同步更新，避免逻辑分散导致的状态不一致问题。

步骤1：完善HTML结构（示例） #

先确保所有需要控制的元素都有明确的ID，方便DOM操作：

<input type="text" id="textInput" placeholder="输入文本">
<input type="checkbox" id="toggleCheckbox"> 勾选我
<div id="targetDiv">需要隐藏的DIV元素</div>
<ul>
  <li id="firstLi">第一个列表项</li>
  <li id="secondLi">第二个列表项</li>
</ul>
<button id="actionBtn" disabled>操作按钮</button>

步骤2：编写统一状态处理函数 #

将三个交互逻辑、按钮禁用逻辑全部放在同一个函数里，逻辑清晰且易维护：

// 获取所有需要操作的DOM元素
const textInput = document.getElementById('textInput');
const toggleCheckbox = document.getElementById('toggleCheckbox');
const targetDiv = document.getElementById('targetDiv');
const firstLi = document.getElementById('firstLi');
const secondLi = document.getElementById('secondLi');
const actionBtn = document.getElementById('actionBtn');

// 统一状态处理函数
function updateElementStates() {
  // 封装当前状态变量，简化后续条件判断
  const hasText = textInput.value.trim() !== '';
  const isCheckboxChecked = toggleCheckbox.checked;

  // 先重置所有元素的显示状态，避免之前的状态残留
  targetDiv.classList.remove('hidden');
  firstLi.classList.remove('hidden');
  secondLi.classList.remove('hidden');

  // 按需求处理三种场景
  if (hasText && isCheckboxChecked) {
    targetDiv.classList.add('hidden');
  } else if (hasText && !isCheckboxChecked) {
    firstLi.classList.add('hidden');
  } else if (!hasText && isCheckboxChecked) {
    secondLi.classList.add('hidden');
  }

  // 处理按钮禁用状态（示例：文本有内容且复选框勾选时启用按钮，可根据需求调整条件）
  actionBtn.disabled = !(hasText && isCheckboxChecked);
}

// 绑定事件监听：文本框输入、复选框状态变化时触发状态更新
textInput.addEventListener('input', updateElementStates);
toggleCheckbox.addEventListener('change', updateElementStates);

// 页面加载时初始化一次状态，确保初始显示符合预期
updateElementStates();

步骤3：添加CSS类控制显示隐藏（推荐） #

用CSS类代替直接操作style.display，更符合语义化且便于后续样式调整：

.hidden {
  display: none;
}

关键注意事项 #

1. 状态同步：所有元素的状态都通过同一个函数更新，避免多个事件处理函数逻辑冲突，解决你之前遇到的按钮禁用状态无法保持的问题。
2. 状态重置：每次处理前先恢复所有元素的默认显示状态，防止之前的隐藏状态残留导致异常。
3. 变量封装：用hasText和isCheckboxChecked封装状态，让条件判断更直观，降低逻辑出错概率。

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