js如何让选项变色

来源：互联网 2023-03-16 23:56:58 版权归原作者所有，如有侵权，请联系我们

Javascript（js）在我们做网页开发时，有很多地方需要用到，客户端的一些操作，UI的变化，数据的收集，验证等功能都可以借助JS来完成。

比如我们有一组多项选择框Checkbox，在选中一个时，就把该选择框的颜色改变，以突出显示选中项，如何用JS完成这个功能？下面一起来看下。

方法/步骤

首先看下我们的代码，html代码里定义了几个checkbox选项，另外还引入了Jquery脚本，我们的js代码里为了方便，使用Jquery来操作。

js如何让选项变色

页面运行后，如图，默认下，checkbox选项选中后，是不会改变颜色的。

js如何让选项变色

需要为选中项添加不一样的颜色，我们要添加一些JS代码，如图，我们的JS代码的大概意思是，为每个checkbox选项添加点击事件，当checkbox选中的时候，为该checkbox所在的div添加一个class样式，该样式定义文字颜色为紫色。

js如何让选项变色

再次运行页面，当我们点击checkbox选项，选中该选项时，该checkbox的文字颜色就变为紫色了。所以我们能用js让选项变色了。除了可以改变文字颜色，我们还可以添加背景颜色，只要在checked样式里定义所需要的样式就行了。

js如何让选项变色

但该代码还没完善，还有一点问题，当再次点击checkbox选项，取消选中状态时，该文字的颜色还是紫色。如图

js如何让选项变色

再修改下代码，为代码添加一些逻辑，如图，当我们在点击checkbox选项时，如果是取消选项选中状态的，我们则为其父容器，即div去掉checked的样式。去掉这个样式class后，该选项的文字就不会是紫色了。

js如何让选项变色

6该信息未经许可获取自百度经验

刷新页面，看下效果，现在选中checkbox选项，文字会变色，取消选中，则会恢复原来的颜色了。

js如何让选项变色

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：js入门的教程下一篇：js模拟H5页面半透明提示效果