HTML | DOM 输入复选框表单属性

介绍

HTML中的复选框（checkbox）是一种用于表示多选项中的其中一个或多个选项被选中的表单元素。在HTML中，复选框通常与<input>元素一起使用。

创建复选框的语法如下：

<input type="checkbox" name="checkbox_name" value="checkbox_value">

其中，type属性为checkbox，表示创建的是一个复选框；name属性表示复选框的名称；value属性表示复选框的值。

当用户点击复选框时，checked属性会自动设置为true表示该复选框已被选中。否则，checked属性为false表示该复选框未被选中。

DOM 属性

在JavaScript中，我们可以使用DOM（文档对象模型）来访问和操作HTML文档中的元素。对于复选框元素，我们可以使用以下属性：

• checked：返回或设置复选框的选中状态，为一个布尔值（true/false）。
• value：返回或设置复选框的值。
• name：返回或设置复选框的名称。
• disabled：返回或设置复选框的禁用状态，为一个布尔值（true/false）。
• form：返回复选框所属的表单（<form>）元素。

获取复选框的选中状态

我们可以使用checked属性来获取或设置复选框的选中状态。例如：

var checkbox = document.getElementById("my_checkbox");
var checked_status = checkbox.checked;

以上代码将返回my_checkbox元素（假设HTML中存在一个id为my_checkbox的复选框元素）的选中状态（true/false）。如果该复选框被选中，checked_status的值为true，否则值为false。

获取/设置复选框的值和名称

我们可以使用value和name属性来获取和设置复选框的值和名称，例如：

var checkbox = document.getElementsByName("my_checkbox")[0];
var checkbox_name = checkbox.name;
var checkbox_value = checkbox.value;
checkbox.name = "new_checkbox_name";
checkbox.value = "new_checkbox_value";

以上代码将获取第一个名称为my_checkbox的复选框元素的名称和值并分别赋值给checkbox_name和checkbox_value变量。然后将该复选框的名称和值分别设置为new_checkbox_name和new_checkbox_value。

获取/设置复选框的禁用状态

我们可以使用disabled属性来获取或设置复选框的禁用状态，例如：

var checkbox = document.getElementById("my_checkbox");
var is_disabled = checkbox.disabled;
checkbox.disabled = true;

以上代码将获取id为my_checkbox的元素的禁用状态并将其赋值给is_disabled变量。然后将该复选框的禁用状态设置为true，即禁用该复选框。

获取复选框所属的表单元素

我们可以使用form属性来获取复选框所属的表单元素，例如：

var checkbox = document.getElementById("my_checkbox");
var form = checkbox.form;

以上代码将获取id为my_checkbox的元素所属的表单元素赋值给form变量。