取消选中更改复选框样式

Question

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

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

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

这不起作用。

另外，我想在某些场合而不是一直这样做。所以，当父复选框被选中而子复选框未被选中时，未选中复选框的样式应该是不同的。而如果 parent 也没有被选中，那么 child 和 parent 应该是正常的样式。

还有其他方法吗？

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 更改元素是否具有此类。