原生js获取CheckBox的value并改变某一个id的背景颜色，选中则为red，未选中则为blue

billyxx 2017-08-02 02:52:12

期间如何保证样式不能叠加？

例如
默认：<div class="o"></div>
CheckBox为true：

<div class="o o-red"></div> 添加一个类o-red

CheckBox为false:

<div class="o o-blue"></div> 添加一个类o-blue

是否用监听？，普通的判断会导致重叠
<div class="o o-blue o-red"></div>

...全文

385 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-08-02

打赏
举报

ie10+话还可以用classList


	if (this.checked) {
		o.classList.remove("o-blue");
		o.classList.add("o-red");
	} else {
		o.classList.remove("o-red");
		o.classList.add("o-blue");
	}

天际的海浪 2017-08-02

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.o {
	width: 50px;
	height: 30px;
	border: 1px solid #999;
}
.o-red {
	background-color: red;
}
.o-blue {
	background-color: blue;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox" />
<div class="o"></div>
<script type="text/javascript">
var o = document.getElementsByClassName("o")[0];
document.getElementById("checkbox").onchange = function () {
	if (this.checked) {
		o.className = o.className.replace(/(^|\s+)o-blue/,"");
		o.className += " o-red";
	} else {
		o.className = o.className.replace(/(^|\s+)o-red/,"");
		o.className += " o-blue";
	}
}
</script>
</body>
</html>