如何用JavaScript访问父li元素及实现复选框关联li样式切换

别担心，刚上手JavaScript遇到这种小问题太正常啦！我来帮你把功能实现，还会给你解释每一步的思路～

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .cut { text-decoration: line-through; opacity: 0.4; }
    #mylist { list-style: none; }
  </style>
</head>
<body>
<div class="container">
  <ul id="mylist">
    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction(this)">
      <label class="mytodo">make tea</label>
    </li>
    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction(this)">
      <label class="mytodo">notes making</label>
    </li>
    <li class="mycheck cut">
      <input type="checkbox" class="status" checked onclick="myfunction(this)">
      <label class="mytodo">set clothes</label>
    </li>
  </ul>
</div>

<script>
function myfunction(checkbox) {
  // 获取当前复选框对应的父元素li
  const targetLi = checkbox.parentElement;
  // 切换cut类：有则移除，无则添加
  targetLi.classList.toggle('cut');
}
</script>
</body>
</html>

关键修改点说明 #

• 给点击事件传递当前元素：在onclick里传入this，这样函数就能直接拿到触发事件的复选框对象，不用再费劲去模糊查找元素。
• 精准定位对应li元素：用checkbox.parentElement就能直接获取到复选框所在的li元素，这比盲目遍历父元素要可靠得多。
• 用classList.toggle简化类操作：这个方法是JS处理类切换的利器——它会自动检测元素是否已经有cut类：勾选复选框时如果没有就添加，取消勾选时如果有就移除，完美适配你的需求，不用写复杂的判断逻辑。

为什么你之前的父元素方法没成功？ #

大概率是没正确定位到目标li元素，或者没有用对类操作的方法。比如如果没有明确指向当前触发事件的复选框，就容易误操作其他元素；而手动写添加/移除类的判断逻辑，也容易出现遗漏情况，不如toggle简洁直观。

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