JavaScript复选框勾选/取消触发事件修改变量值问题排查

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

• 元素ID不匹配：HTML里复选框的id属性值是checkBox，但JavaScript获取元素时传入的ID是flexCheckDefault，根本无法选中目标复选框，后续事件绑定完全不会生效。
• 事件逻辑写死：change事件的回调函数没有判断复选框的实际勾选状态，无论勾选还是取消操作，都直接把productionState赋值为true，自然无法实现取消勾选时重置为false的需求。

HTML 代码 #

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkBox">
  <label class="form-check-label" for="checkBox">
    Production State
  </label>
</div>

JavaScript 代码 #

let productionState = false
// 传入和HTML一致的ID，正确获取复选框元素
const checkbox = document.getElementById("checkBox");

checkbox.addEventListener("change", (event) => {
  // 直接读取复选框的checked属性，同步状态到变量
  // checked属性本身就是布尔值：勾选为true，取消勾选为false
  productionState = event.target.checked;
  // 可通过控制台打印验证状态变化
  console.log('productionState当前值：', productionState)
});

复选框的change事件会在勾选状态发生变化时触发，事件对象的target.checked属性会实时返回当前复选框的布尔状态，不需要额外写分支判断，直接把这个值同步给业务变量即可实现需求。

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