如何使用JavaScript点击父元素时设置checkbox选中状态？

你的代码存在3处问题，导致功能无法正常运行：

• HTML标签嵌套混乱：span标签开闭不匹配，多余的闭合标签会造成DOM结构解析异常
• JS选择器语法错误：document.getElementsByTagName('input'[0]括号位置错误，无法正确选中input元素，运行时会直接抛出语法错误
• 逻辑缺陷：checked属性接收布尔类型值，而非字符串；且现有逻辑仅能将复选框设为选中状态，无法实现点击切换选中/取消选中的交互效果

基础修复版本 #

修正后的HTML结构：

<span style="background: yellow; padding: 50px;" onclick="setCheckBox()">
  <input type="checkbox" name="f01" value="100">
</span>

修正后的JS代码：

function setCheckBox() {
  const checkbox = document.querySelector('input[name="f01"]');
  // 取反实现选中状态切换
  checkbox.checked = !checkbox.checked;
}

推荐优化版本 #

直接传入当前点击的父元素对象，精准查找内部复选框，避免页面存在多个同名input时出现选择错误：
HTML部分：

<span style="background: yellow; padding: 50px;" onclick="setCheckBox(this)">
  <input type="checkbox" name="f01" value="100">
</span>

JS部分：

function setCheckBox(parentEl) {
  const checkbox = parentEl.querySelector('input[type="checkbox"]');
  checkbox.checked = !checkbox.checked;
}

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