勾选 HTML 代码 - HTML

在 HTML 中，通常我们需要使用勾选框（checkbox）来实现用户选择的功能。勾选框的状态有选中（checked）和未选中（unchecked）两种状态。这篇文章将介绍如何使用 HTML 和 JavaScript 实现勾选框功能。

HTML 勾选框

在 HTML 中，勾选框被表示为 <input> 元素，其 type 属性被设置为 checkbox。

以下代码演示了如何创建一个简单的勾选框。

<input type="checkbox" name="myCheckbox" value="1">选项 1

上面的代码片段中：

• type="checkbox" 指示这是一个勾选框。
• name="myCheckbox" 设定了勾选框的名称。
• value="1" 为勾选框设定了一个值。
• 选项 1 是勾选框旁边的文本。

你可以设置多个勾选框的 name 属性相同，以将它们组合成一个勾选框组。

<input type="checkbox" name="checkboxGroup" value="1">选项 1
<input type="checkbox" name="checkboxGroup" value="2">选项 2
<input type="checkbox" name="checkboxGroup" value="3">选项 3

上面的代码片段中，我们创建了一个名为 checkboxGroup 的勾选框组，其中包含了三个不同的选项。

JavaScript 勾选框

在 JavaScript 中，我们可以使用 checked 属性获取或设置勾选框的状态。

以下代码演示如何检查一个勾选框是否被选中：

var myCheckbox = document.getElementsByName("myCheckbox")[0];
if (myCheckbox.checked) {
    console.log("勾选框被选中了");
} else {
    console.log("勾选框未被选中");
}

上面的代码片段中，getElementsByName("myCheckbox")[0] 获取了名为 myCheckbox 的勾选框，myCheckbox.checked 返回勾选框的状态，可以用来检查该勾选框是否被选中。

要将勾选框设置为选中状态，可以将 checked 属性设置为 true：

myCheckbox.checked = true;

结语

在本文中，我们介绍了如何使用 HTML 和 JavaScript 来实现勾选框的功能。使用勾选框可以使用户更方便地进行选择操作，提升用户体验，同时也可以方便开发人员进行逻辑处理。