如何在普通 JavaScript 中实现多输入复选框？

我们将学习如何实现多输入复选框。复选框输入选择器将具有以下功能 -

• 可以使用复选框选择多个选项。

• 所选选项将显示为单独的列表。

• 每个选定的选项都会提供删除图标，以取消选中/删除该选项。

另一件事需要注意的是，我们不会使用任何第三方库来实现这些功能，所有内容都将仅用 HTML + JavaScript + CSS 编写。

方法

• 我们将有一个对象，其键将用作复选框输入的标签，值（true/false）将用作选中的属性。

• 然后我们将渲染该对象的每个键。

• 每当任何选项的状态发生变化时，我们都会重新呈现列表。

• 同样，单击删除图标后，我们将更新选项并重新呈现列表。

示例

因此，让我们看一下相同的代码 -

说明

• 上面的代码创建了一个显示一组复选框的网页。

• 每个都有不同的颜色标签（红色、绿色、黄色等）。

• 选中复选框后，页面顶部的“holder”div 中会显示相应的颜色标签。

• 标签还会显示一个“x”，单击该“x”时，会取消选择复选框并从“holder”div 中删除标签。

• 代码使用 JavaScript 来操作 DOM 并处理复选框选择和取消选择。

以上是如何在普通 JavaScript 中实现多输入复选框？的详细内容。更多信息请关注PHP中文网其他相关文章！