JavaScript 復選框事件處理程序

Question

在 JavaScript 中選中或取消選中復選框時如何觸發事件？

我有一個復選框。 當我選中它時，我希望將變量 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

const checkbox = document.getElementById("flexCheckDefault");

checkbox.addEventListener("change", (event) => (productionState = true));

Answer 1

let productionState = false

const checkbox = document.getElementById("flexCheckDefault");

checkbox.addEventListener("change", (event) => {
productionState = checkbox.checked;
});

Answer 2

也許這就是你要找的？

 let productionState=false; document.getElementById("flexCheckDefault").addEventListener("change",ev => console.log(productionState=ev.target.checked));

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