checkbox选中和不选中触发的事件：checkbox选中和不选中触发的事件，从基础到进阶

来源：网络作者：日期：2025-10-16 09:16:55

基础事件监听

复选框的change事件是最常用的监听方式，当复选框的状态发生变化时（即用户选中或取消选中）,该事件会被触发。

<input type="checkbox" id="myCheckbox">
<script>
  const checkbox = document.getElementById('myCheckbox');
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      console.log('复选框被选中');
    } else {
      console.log('复选框被取消选中');
    }
  });
</script>

在这个例子中，每当复选框的状态发生变化时，都会检查this.checked属性,以确定用户是选中还是取消选中了复选框。

使用`input`事件

除了change事件，还可以使用input事件来监听复选框的变化。input事件在用户与输入元素交互时触发,包括复选框。

checkbox.addEventListener('input', function() {
  console.log('复选框状态变化：', this.checked);
});

input事件的优势在于它能更及时地响应用户操作,尤其在需要实时反馈的场景中非常有用。

处理多个复选框

当页面中有多个复选框时，可能需要对每个复选框进行统一处理,计算选中的复选框数量或获取选中的值。

<input type="checkbox" id="option1" value="选项1">
<input type="checkbox" id="option2" value="选项2">
<input type="checkbox" id="option3" value="选项3">
<script>
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateSelection);
  });
  function updateSelection() {
    const selectedValues = Array.from(checkboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value);
    console.log('选中的值：', selectedValues);
  }
</script>

在这个例子中，每当任何一个复选框的状态发生变化时，都会更新selectedValues数组,并在控制台输出选中的值。

进阶技巧

使用`closest`方法

如果复选框是某个容器的子元素，可以使用closest方法找到最近的父元素,以便进行更精确的操作。

checkbox.addEventListener('change', function() {
  const container = this.closest('.checkbox-container');
  // 在这里对容器进行操作
});

使用`reduce`方法计算总价

假设每个复选框代表一个可选的项目，且每个项目有对应的单价，可以使用reduce方法计算总价。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let total = 0;
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateTotal);
});
function updateTotal() {
  total = Array.from(checkboxes)
    .filter(cb => cb.checked)
    .reduce((sum, cb) => sum + parseFloat(cb.dataset.price), 0);
  console.log('总价：', total);
}

在这个例子中，每个复选框使用data-price属性存储其单价，updateTotal函数会计算所有选中复选框的总价。