html 复选框|极客教程

html 复选框

在网页开发中，复选框是一种非常常见的交互元素，它允许用户从多个选项中进行选择。本文将详细介绍如何使用 HTML 创建和使用复选框，并提供示例代码和运行结果。

1. HTML 复选框的基本结构和属性

在 HTML 中，复选框使用 <input> 元素来创建。以下是复选框的基本结构：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
<label for="checkbox1">选项1</label>

type="checkbox"：指定 <input> 元素的类型为复选框。
id 属性：指定复选框的唯一标识符，与 <label> 元素的 for 属性相对应。
name 属性：指定复选框的名称，用于在提交表单时将勾选的复选框的值发送到服务器。
value 属性：指定复选框的值，当该复选框被选中时，它的值将被发送到服务器。

复选框需要与 <label> 元素配合使用，以提供用户友好的交互。<label> 元素的 for 属性应与复选框的 id 属性相同，这样当用户点击 <label> 元素时，与之相关联的复选框也会被选中。

2. HTML 复选框的状态

复选框有三种可能的状态：未选中、选中和禁用。

2.1 未选中状态

当复选框未被选中时，它的状态为未选中状态。此时，复选框前面不会显示勾选标志。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
<label for="checkbox1">选项1</label>

运行结果：

选项1

2.2 选中状态

当用户点击复选框并选中它时，它的状态将变为选中状态。此时，复选框前面会显示勾选标志。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

运行结果：

选项1

在示例代码中，我们使用了 checked 属性来指定复选框的初始状态为选中状态。

2.3 禁用状态

复选框还可以设置为禁用状态，被禁用的复选框无法选中。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1" disabled>
<label for="checkbox1">选项1</label>

运行结果：

选项1

在示例代码中，我们使用了 disabled 属性来禁用了复选框。

3. HTML 复选框的默认值和提交表单

复选框可以设置默认值，以及在表单提交时将勾选的复选框的值发送到服务器。

3.1 默认值

通过在 <input> 元素上设置 checked 属性，可以指定复选框的默认值。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

运行结果：

选项1

在示例代码中，我们使用了 checked 属性来指定复选框的默认值为选中状态。

3.2 提交表单

在表单中使用复选框时，通过在 <form> 元素中指定 method 和 action 属性，设置表单的提交方式和目标地址。

示例代码：

<form method="post" action="/submit">
  <input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
  <label for="checkbox1">选项1</label>
  <br>
  <input type="checkbox" id="checkbox2" name="checkbox2" value="value2">
  <label for="checkbox2">选项2</label>
  <br>
  <button type="submit">提交</button>
</form>

在示例代码中，我们创建了一个包含两个复选框和一个提交按钮的表单。当用户点击提交按钮时，表单将向 /submit 这个目标地址发送 POST 请求，并将勾选的复选框的值一并发送到服务器。

4. 使用 JavaScript 操控复选框

除了使用静态的 HTML 结构创建复选框，我们还可以使用 JavaScript 动态操控复选框的属性和状态。

4.1 获取复选框的状态

通过 JavaScript，我们可以获取复选框的状态，即复选框是否被选中。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
<label for="checkbox1">选项1</label>
<p id="result"></p>

<script>
  const checkbox = document.getElementById("checkbox1");
  const result = document.getElementById("result");

  checkbox.addEventListener("change", () => {
    if (checkbox.checked) {
      result.textContent = "选项1 已选中";
    } else {
      result.textContent = "选项1 未选中";
    }
  });
</script>

运行结果：

选项1

在示例代码中，我们通过使用 change 事件监听器，实时获取复选框的变化。当复选框被选中或取消选中时，相关的文本内容将会更新。

4.2 动态设置复选框的状态

通过 JavaScript，我们还可以动态设置复选框的状态，包括选中和禁用。

示例代码：

<input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
<label for="checkbox1">选项1</label>
<br>
<button onclick="check">选中</button>
<button onclick="uncheck">取消选中</button>
<button onclick="disable">禁用</button>
<button onclick="enable">启用</button>

<script>
  const checkbox = document.getElementById("checkbox1");

  function check() {
    checkbox.checked = true;
  }

  function uncheck() {
    checkbox.checked = false;
  }

  function disable() {
    checkbox.disabled = true;
  }

  function enable() {
    checkbox.disabled = false;
  }
</script>

在示例代码中，我们通过 JavaScript 定义了四个函数，分别用于选中、取消选中、禁用和启用复选框。通过点击相应的按钮，可以实现对复选框状态的动态设置。