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

Question

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

我尝试取消选中以下内容，

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

这是行不通的。

另外，我想在某些情况下（并非始终）这样做。 因此，当父复选框被选中而子复选框未被选中时，未选中复选框的样式应该不同。 而如果还没有选中父项，则子项和父项应为正常样式。

还有其他办法吗？

Answer 1

如前所述，您不能更改复选框的背景颜色，但是有一些变通办法可以达到预期的效果。

使用JavaScript：

 var defaultState = "checked"; var fakecboxes = document.getElementsByClassName("fakecbox"); for (var i = 0; i < fakecboxes.length; i++) { (function (i) { if (!fakecboxes[i].classList.contains(defaultState)) { fakecboxes[i].classList.add(defaultState); } fakecboxes[i].onclick = function () { if (!this.classList.contains("checked")) { this.classList.add("checked"); this.classList.remove("unchecked"); } else { this.classList.remove("checked"); this.classList.add("unchecked"); } }; })(i); } 

 body { user-select: none; -webkit-user-select: none; } .fakecbox { width: 12px; height: 12px; box-sizing: border-box; margin: 3px; margin-left: 4px; display: inline-block; position: relative; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); background-color: rgb(222, 222, 222); background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%); border-radius: 2px; border-width: 1px; border-style: solid; border-top-color: rgb(178, 178, 178); border-left-color: rgb(167, 167, 167); border-right-color: rgb(167, 167, 167); border-bottom-color: rgb(167, 167, 167); } .fakecbox:hover { border-top-color: rgb(168, 168, 168); border-left-color: rgb(157, 157, 157); border-right-color: rgb(157, 157, 157); border-bottom-color: rgb(157, 157, 157); box-shadow: 0 1px 0 rgba(0, 0, 0, .125); background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%); } .fakecbox:active { border-top-color: rgb(173, 173, 173); border-left-color: rgb(161, 161, 161); border-right-color: rgb(161, 161, 161); border-bottom-color: rgb(161, 161, 161); background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%); box-shadow: none; } .fakecbox.checked::after { content:""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: center; } .fakecbox.red { background: rgba(255,0,0,.4); border: 1px solid rgba(200,0,0,.5); } .fakecbox.redonuncheck.unchecked { background: rgba(255,0,0,.4); border: 1px solid rgba(200,0,0,.5); } 

 <input type="checkbox" />Normal checkbox <br> <div class="fakecbox"></div>Fake checkbox <br> <div class="fakecbox red"></div>Fake red checkbox <br> <div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox 

---

这个仅使用CSS。 您可以删除最后一个标签<label for="cbox">Normal checkbox</label> 。 复选框仍然有效。 您可以修改未选中状态的span ，并input:checked + span已选中状态的范围。

 .checkbox input { display: none; } .checkbox span { width: 20px; height: 20px; display: inline-block; background-color: red; } .checkbox input:checked + span { background-color: lime; } 

 <label class="checkbox"> <input type="checkbox" name="checkbox"/> <span></span> </label> <label for="checkbox">Normal(modified) checkbox</label> 

Answer 2

您可以使用CSS伪元素。

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

因此，当选中复选框时，您将紧接其后定位标签：

CSS：

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

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

HTML：

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

摘自CSS-Tricks

希望这可以帮助

Answer 3

http://jsfiddle.net/2ck4tfj3/1/

input[type=checkbox] {
    position: relative;
}
input[type=checkbox].awesome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}

并使用它动态地将背景更改为红色： document.getElementById("checkbox1").className = "awesome";

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