input的checkbox选中事件

HTML 中的 Checkbox 控件是一种选择控件，允许用户在多个选项中选择一个或多个项目。 Checkbox 元素可以与 JavaScript 一起使用，使开发人员可以根据用户的行为做出反应。 在本文中，我们将探讨使用 JavaScript 监听 Checkbox 选中事件的方法及其应用，包括一些具体的案例说明。

Checkbox 控件的 HTML 代码如下所示：

```html

Option 1

Option 2

Option 3

```

当你在页面上点击其中一个 Checkbox 时，可以触发 "change" 事件。我们可以通过 JavaScript 监听这个事件来识别 Checkbox 是否被选中。

### 使用 onchange 事件监听 Checkbox 状态变化

可以使用 onchange 事件在 Checkbox 状态发生变化时调用函数。以下是一个示例代码：

```html

Option 1

Option 2

Option 3

```

在 HTML 中添加 onchange 属性，让它调用 handleChange 函数，在此函数中，我们获取每个 Checkbox 的引用，检查它是否被选中，如果被选中，则执行所需的操作。

### 使用 addEventListener() 监听 Checkbox 状态变化

还可以使用 addEventListener() 方法来监听事件。以下是一段示例代码：

```html

Option 1

Option 2

Option 3

```

使用 addEventListener() 方法，我们可以定义一个函数来响应 "change" 事件。这里创建了三个事件处理程序，一个用于每个 Checkbox。在事件处理程序中，我们执行所需的操作。

### 应用案例

#### 多选删除表格行

假设我们有一个表格，其中有一个列包含 Checkbox，表示每行的状态。当用户点击表格标题中的 "删除" 按钮时，应该删除已选中的表格行。以下是一段响应删除按钮事件的示例代码：

```html

Delete selected rows

```

此示例通过在表格行中添加 Checkbox 以支持多选操作。由于在单击“删除所选行”按钮时需要知道哪些行被选中，则使用 selectRow() 函数来跟踪所选行。该函数在每个行的 Checkbox 上监听 "change" 事件，如果该行被选中，则将其添加到所选的行列表中，否则将其从该列表中删除。删除获取所有已选行的引用，然后循环遍历这些引用，从它们的父节点中删除它们。

#### 根据复选框过滤列表

假设我们有一个列表，其中包含多个项目，每个项目都有一个与之关联的 Checkbox。当选择某些复选框时，应该仅显示与这些复选框关联的项目。以下是一段示例代码：

```html

• Apple

• Orange

• Carrot

• Broccoli

```

此示例包含一个列表，其中每个项目都有一个 Checkbox 与之关联。我们可以通过在 Checkbox 上运行事件侦听器来更新列表的状态。当某个 Checkbox 状态发生变化时，该函数会计算已选的值并更新列表中的每个项目以反映已选的值。

### 总结

在本篇文章中，我们探讨了如何监听 Checkbox 的 "change" 事件，以及如何使用这些事件处理程序来执行所需的操作，如多选删除表格行、根据复选框过滤列表等。这些技术可以扩展您的应用程序，并帮助您提高用户体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/