我们将学习如何实现多输入复选框。复选框输入选择器将具有以下功能 -
可以使用复选框选择多个选项。
所选选项将显示为单独的列表。
每个选定的选项都会提供删除图标,以取消选中/删除该选项。
另一件事需要注意的是,我们不会使用任何第三方库来实现这些功能,所有内容都将仅用 HTML + JavaScript + CSS 编写。
我们将有一个对象,其键将用作复选框输入的标签,值(true/false)将用作选中的属性。
然后我们将渲染该对象的每个键。
每当任何选项的状态发生变化时,我们都会重新呈现列表。
同样,单击删除图标后,我们将更新选项并重新呈现列表。
因此,让我们看一下相同的代码 -
Multiple input Checkbox
上面的代码创建了一个显示一组复选框的网页。
每个都有不同的颜色标签(红色、绿色、黄色等)。
选中复选框后,页面顶部的“holder”div 中会显示相应的颜色标签。
标签还会显示一个“x”,单击该“x”时,会取消选择复选框并从“holder”div 中删除标签。
代码使用 JavaScript 来操作 DOM 并处理复选框选择和取消选择。
以上是如何在普通 JavaScript 中实现多输入复选框?的详细内容。更多信息请关注PHP中文网其他相关文章!