页面加载及点击复选框时，为父元素<li>添加/移除.transparent类的实现方案

嘿，这个需求很清晰，咱们用原生JavaScript就能完美搞定，刚好覆盖你提到的两个场景：页面初始化时的批量处理，以及用户交互时的实时更新。下面是具体的实现步骤和代码：

1. 先准备基础样式（可选但建议） #

先定义.transparent类的样式，方便你直观看到效果，你也可以根据需求换成其他样式：

.transparent {
  opacity: 0.5; /* 半透明效果，也可以换成灰色背景、浅文字色等 */
}

2. 核心JavaScript实现 #

我们写一个通用函数来处理单个列表项的类切换，这样不管是初始化还是点击事件都能复用，避免重复代码：

// 定义处理单个列表项的核心函数
function toggleListItemClass(checkbox) {
  const listItem = checkbox.closest('li');
  if (!listItem) return; // 确保找到对应的li元素，避免报错
  
  // 根据复选框选中状态，切换transparent类
  if (checkbox.checked) {
    listItem.classList.remove('transparent');
  } else {
    listItem.classList.add('transparent');
  }
}

// 场景1：页面加载完成时初始化状态
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有列表中的复选框
  const checkboxes = document.querySelectorAll('ul li input[type="checkbox"]');
  
  // 遍历每个复选框，执行类切换逻辑
  checkboxes.forEach(toggleListItemClass);
});

// 场景2：用户点击复选框时实时更新
document.addEventListener('click', function(e) {
  // 判断点击的是不是目标复选框（事件委托，不用给每个复选框单独绑事件）
  if (e.target.matches('ul li input[type="checkbox"]')) {
    toggleListItemClass(e.target);
  }
});

代码小解释 #

• toggleListItemClass函数：是整个逻辑的核心，接收复选框元素后找到它的父级<li>，然后根据复选框的选中状态添加/移除类，复用性拉满。
• DOMContentLoaded事件：页面DOM加载完成后触发，批量处理所有复选框的初始状态，确保页面一打开就符合要求。
• 全局点击监听：用了事件委托的思路，不用给每个复选框单独绑定事件，就算后续动态添加新的复选框，这个逻辑也能生效，扩展性更好。

完整可运行示例 #

把HTML、CSS、JS放在一起的完整示例，直接复制就能用：

<!DOCTYPE html>
<html>
<head>
  <style>
    .transparent {
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <ul>
    <li><input type='checkbox' checked></li>
    <li><input type='checkbox'></li>
    <li><input type='checkbox' checked></li>
    <li><input type='checkbox'></li>
  </ul>

  <script>
    function toggleListItemClass(checkbox) {
      const listItem = checkbox.closest('li');
      if (!listItem) return;
      
      if (checkbox.checked) {
        listItem.classList.remove('transparent');
      } else {
        listItem.classList.add('transparent');
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      const checkboxes = document.querySelectorAll('ul li input[type="checkbox"]');
      checkboxes.forEach(toggleListItemClass);
    });

    document.addEventListener('click', function(e) {
      if (e.target.matches('ul li input[type="checkbox"]')) {
        toggleListItemClass(e.target);
      }
    });
  </script>
</body>
</html>

这样就能完美实现你要的效果：页面加载时自动给未选中复选框的<li>加上.transparent类，用户点击复选框时，选中就移除类，取消选中就重新添加类。

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