原生js获取CheckBox的value并改变某一个id的背景颜色，选中则为red，未选中则为blue
期间如何保证样式不能叠加？
例如
默认：<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>
例如
默认：<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>
...全文
请发表友善的回复…
发表回复
天际的海浪 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>
斯洛文尼亚旅游 2017-08-02
- 打赏
- 举报
先去掉o-blue或者o-red添加不就行了
div.className=div.className.replace(/o-(red|blue)/g,'')
div.className+=' o-blue或者red'
