JavaScript 复选框 onChange

复选框的 change 事件可让你在其选中状态发生变化时作出响应。读取元素 checked 属性即可取得当前布尔值。你可以通过内联 onchange 属性连接处理函数、为元素的 onchange 属性赋值，或使用 addEventListener 注册 change 监听器。

使用 change 事件处理复选框状态变化

用户更改复选框的选中状态时，会触发 change 事件；它不会等到元素失去焦点后才触发。事件会告知代码状态已经变化，而 checked 则表示当前状态。对于同一个元素，请选择以下一种模式，让响应逻辑的归属清晰。

使用内联 onchange 处理函数

内联处理函数会在复选框的 HTML 中调用函数。在这种处理函数的上下文中，this 指向复选框元素，因此函数可以直接读取它的 checked 属性。标签可为控件关联描述性文字，结果段落则可用于显示状态。

本节中的代码以及显示的标签或输出仍为英文。

<label>
  <input type="checkbox" onchange="showState(this)">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  function showState(checkbox) {
    document.getElementById("result").textContent = checkbox.checked;
  }
</script>

HTML 的 onchange 属性用于指定要调用的处理函数。textContent 会将布尔值作为纯文本显示。对于小型示例，内联处理函数很方便；但它会将行为与标记混在一起，因此当项目需要将两者分开管理时，可能不太适用。

为 onchange 属性赋值处理函数

若要将处理函数保留在 JavaScript 中，请为复选框设置 id，选中该元素，然后将函数赋给它的 onchange 属性。如果函数声明了参数，该参数接收事件对象；如果函数会直接读取已选中的元素，则无需声明参数。

本节中的代码以及显示的标签或输出仍为英文。

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.onchange = function () {
    result.textContent = checkbox.checked;
  };
</script>

为属性赋值即可设置元素的处理函数。之后若将另一个函数赋给同一属性，先前的处理函数就会被替换。因此，如果多个彼此独立的代码部分都需要响应事件，请使用监听器。

使用 addEventListener 注册 change 监听器

addEventListener 会为指定的事件注册回调函数。此模式也会将事件对象作为回调参数传入；event.currentTarget 表示注册此监听器的元素。

本节中的代码以及显示的标签或输出仍为英文。

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.addEventListener("change", function (event) {
    result.textContent = event.currentTarget.checked;
  });
</script>

添加监听器不会替换其他地方注册的处理函数。调用 addEventListener 时，第一个参数应使用事件名称 change，而不是 onchange。

读取复选框的 checked 状态

checked 属性是布尔值：复选框被选中时为 true，未选中时为 false。在处理函数中读取它，即可取得状态变化后的值。在浏览器中，上方示例会将该值写入结果区域；你也可以将这项赋值替换为界面所需的操作，例如启用相关控件。

这个简短的 JavaScript 示例单独展示了读取状态的逻辑。上方的浏览器示例则说明如何将该逻辑连接到实际的复选框事件。

本节中的代码以及显示的标签或输出仍为英文。

function showState(checkbox) {
  return checkbox.checked;
}

const checkbox = { checked: true };
console.log(showState(checkbox));

true

此示例会打印从 checked 读取的布尔值。JavaScript 示例可独立运行；HTML 片段是浏览器页面示例，并未作为已执行的输出展示。