Question

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

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

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

这不起作用。

另外，我想在某些场合不是一直这样做。因此，当选中父复选框并且未选中子项时，未选中的checkebox的样式应该不同。然而，如果父母也没有被检查，那么孩子和父母应该处于正常的风格。

还有其他办法吗？

Answer 1

正如我之前所说，您无法更改复选框的背景颜色，但有一些解决方法可以获得所需的效果。

使用JavaScript：

＆＃13;

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);
}

＆＃13;

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);
}

＆＃13;

<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

＆＃13;

＆＃13; 这个只使用CSS。您可以删除最后一个标签<label for="cbox">Normal checkbox</label>。复选框仍然有效。您可以将span修改为未选中状态，将input:checked + span修改为已选中状态。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用CSS伪造元素。

CSS中的checked伪类选择元素处于选中状态时。它只与radio和checkbox类型的input（）元素相关联。：checked伪类选择器在选中或切换为打开状态时匹配radio和checkbox输入类型。如果未选中或选中它们，则无法匹配。

因此，选中复选框后，您将紧跟其后的标签：

CSS：

var closeIcon = document.getElementsByClassName('monique-close-icon'); 
function closeBigImgAndContainer(e)
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

for (var i = 0; i < closeIcon.length; i++) {
   closeIcon[i].addEventListener('click', closeBigImgAndContainer); 
}

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

HTML：

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

取自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";

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

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

3 个答案: