HTML | DOM 输入复选框属性

在 HTML 中，我们可以使用 <input> 标签创建复选框，用户可以通过勾选或取消勾选来选择或取消选择选项。在绑定复选框时，我们可能需要获取或设置其属性。下面我们将介绍如何使用 JavaScript 操作复选框的属性。

获取和设置属性

我们可以使用 JavaScript DOM (文档对象模型) 来获取或设置复选框的属性。以下是常用的属性和相应的 JavaScript 代码：

• checked: 获取或设置勾选状态。

  // 获取 checked 属性
  const checkbox = document.getElementById("myCheckbox");
  const isChecked = checkbox.checked;
  
  // 设置 checked 属性
  checkbox.checked = true;
  

• value: 获取或设置选中值。

  // 获取 value 属性
  const checkbox = document.getElementById("myCheckbox");
  const value = checkbox.value;
  
  // 设置 value 属性
  checkbox.value = "someValue";
  

• name: 获取或设置名称。

  // 获取 name 属性
  const checkbox = document.getElementById("myCheckbox");
  const name = checkbox.name;
  
  // 设置 name 属性
  checkbox.name = "myCheckbox";
  

• disabled: 获取或设置禁用状态。

  // 获取 disabled 属性
  const checkbox = document.getElementById("myCheckbox");
  const isDisabled = checkbox.disabled;
  
  // 设置 disabled 属性
  checkbox.disabled = true;
  

事件

当用户与复选框交互时，我们可以侦听事件以执行相应的操作。以下是常用的事件和相应的 JavaScript 代码：

• onchange: 当勾选状态发生变化时触发。

  const checkbox = document.getElementById("myCheckbox");
  checkbox.onchange = function() {
    console.log("Checkbox checked:", this.checked);
  };
  

• onclick: 当用户点击复选框时触发。

  const checkbox = document.getElementById("myCheckbox");
  checkbox.onclick = function() {
    console.log("Checkbox clicked:", this.checked);
  };
  

总结

通过 JavaScript 操作复选框属性和事件，我们可以创建更加交互式的用户界面。常用的属性包括 checked、value、name 和 disabled，常用的事件包括 onchange 和 onclick。在实际开发中，我们可以根据需求自由选择相应的属性和事件来实现自己想要的效果。