Javascript 取消选中时更改复选框样式

我在页面中有一个复选框列表，默认情况下所有复选框都处于选中状态。当用户单击任何特定复选框取消选中时，应更改复选框的背景色，或者应使用红色的十字标记选中复选框

我在取消选中时尝试了以下操作

document.getElementById("checkBooxId1").style = "background-color:red";

这是行不通的

此外，我希望在某些场合，而不是一直这样做。因此，当选中父复选框而未选中子复选框时，未选中复选框的样式应该不同。然而，如果未选中父项，则子项和父项应为正常样式

还有别的办法吗？

只需使用它将背景动态更改为红色：

document.getElementById（“checkbox1”）.className=“awesome”

我使用CSS伪元素在类
awesome
中设置输入复选框的样式。您可以使用JavaScript更改元素是否具有此类。
您可以使用CSS psuedo元素

CSS中的：checked伪类在元素处于选定状态时选择元素。它仅与radio和checkbox类型的input（）元素相关联。：checked伪类选择器在选中或切换到打开状态时匹配单选和复选框输入类型。如果未选择或选中它们，则不存在匹配项

因此，当选中复选框时，您将在它之后立即定位标签：

CSS:

标签文本将从灰色斜体变为红色普通字体

HTML:


CSS太棒了

取自

希望这有帮助
正如我前面所说的，您不能更改复选框的背景色，但有一些变通方法可以获得所需的效果

使用JavaScript：
var defaultState=“checked”；
var fakecboxes=document.getElementsByClassName（“fakecbox”）；
对于（变量i=0；i

正文{
用户选择：无；
-webkit用户选择：无；
}
.假盒子{
宽度：12px；
高度：12px；
框大小：边框框；
保证金：3倍；
左边距：4倍；
显示：内联块；
位置：相对位置；
长方体阴影：0 1px 0 rgba（0,0,0,1）；
背景色：rgb（222222222）；
背景：线性梯度（底部，rgb（243243243243）0%，rgb（224224224）40%，rgb（224224224）100%）；
边界半径：2px；
边框宽度：1px；
边框样式：实心；
边框顶部颜色：rgb（178178178）；
左边框颜色：rgb（167167167）；
右边框颜色：rgb（167167167）；
边框底色：rgb（167167167）；
}
.fakecbox:悬停{
边框顶部颜色：rgb（168、168、168）；
左边框颜色：rgb（157、157、157）；
右边框颜色：rgb（157、157、157）；
边框底色：rgb（157、157、157）；
盒影：0 1px 0 rgba（0,0,0,125）；
背景：线性梯度（到底部，rgb（244244244）0%，rgb（226226226226）40%，rgb（226226226226）100%）；
}
.fakecbox：活动{
边框顶部颜色：rgb（173173173）；
左边框颜色：rgb（161161161）；
右边框颜色：rgb（161161161）；
边框底色：rgb（161161161）；
背景：线性梯度（底部，rgb（231231231）0%，rgb（2132113）40%，rgb（2132113）100%）；
盒影：无；
}
.fakecbox.checked:：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景图片：url（数据：image/png；base64，ivborw0kggoaaansuheugaaaaaaaaicamaaadz0u65aaam1bmvex///9cqkjerrermtextextext09wvlzzwvlfx19gygblzwvmzmzpawlra2txfycnjzc3n6enq1n2u5aaaxrtlqobyzgaac5jrefuealwycramed7eyha/tNyuUiUj3JtB+bp2pax5p5pyfqd9krlcatf8zlao8zlaoaaaaaasu5cvor5cyii=）；
背景重复：无重复；
背景位置：中心；
}
.fakecbox.red{
背景：rgba（255,0,0,4）；
边框：1px实心rgba（200,0,0,5）；
}
.fakecbox.reduncheck.uncheck.unchecked{
背景：rgba（255,0,0,4）；
边框：1px实心rgba（200,0,0,5）；
}
Normal复选框


假复选框


假红色复选框


取消选中复选框时伪红色
你能粘贴所有代码吗？这将帮助其他人发现问题。表单元素样式设计不是那么容易，你需要很多技巧：什么是父复选框？它是一种树结构。是的，我可以使用此id取消选中或检查。即使代码正确，无法更改复选框的背景色。是否有其他方法对取消选中事件进行样式设置？您可以使用CSS psuedo元素，如：：after或：：before，并对其进行样式设置。或者，您可以在复选框后添加一个
，并设置其样式。我只想在复选框未选中时执行此操作，并且在再次选中时应将其恢复为正常样式。
input[type=checkbox] {
    position: relative;
}
input[type=checkbox].awesome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
} 
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
} 

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>