我们将学习如何实现多输入复选框。复选框输入选择器将具有以下功能 -
-
可以使用复选框选择多个选项。
-
所选选项将显示为单独的列表。
-
每个选定的选项都会提供删除图标，以取消选中/删除该选项。
另一件事需要注意的是，我们不会使用任何第三方库来实现这些功能，所有内容都将仅用 html javascript css 编写。
方法
-
我们将有一个对象，其键将用作复选框输入的标签，值（true/false）将用作选中的属性。
-
然后我们将渲染该对象的每个键。
-
每当任何选项的状态发生变化时，我们都会重新呈现列表。
-
同样，单击删除图标后，我们将更新选项并重新呈现列表。
示例
因此，让我们看一下相同的代码 -
multiple input checkbox
说明
-
上面的代码创建了一个显示一组复选框的网页。
-
每个都有不同的颜色标签（红色、绿色、黄色等）。
-
选中复选框后，页面顶部的“holder”div 中会显示相应的颜色标签。
-
标签还会显示一个“x”，单击该“x”时，会取消选择复选框并从“holder”div 中删除标签。
-
代码使用 javascript 来操作 dom 并处理复选框选择和取消选择。