样本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle</title>
<style>
#first {
color: blue;
}
#second {
border: 1px solid green;
}
#third {
background: tan;
}
</style>
</head>
<body>
<label for="box">Toggle</label>
<input type="checkbox" id="box" onchange="toggle();">
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
<script>
function toggle() {
var box = document.getElementById('box');
var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');
if (box.checked) {
first.style.color = 'red';
second.style.border = '2px dotted blue';
third.style.background = 'olive';
} else {
first.style.color = 'blue';
second.style.border = '1px solid green';
third.style.background = 'tan';
}
}
</script>
</body>
</html>
演示
我想知道input checkbox是否是创建切换的合适元素。我还想知道如何撤消if子句中的内容：在else中，我是否必须重复我的样式表，或者是否有一种更短、更整洁的方法可以返回到初始状态？
你可以用这样更好的方式来做：demo
在html中添加一个父div，如下所示：
<div id="parent">
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
</div>
然后用css代替内联样式处理前端：
.checked #first {
color:red;
}
.checked #second {
border:2px dotted blue;
}
.checked #third {
background:olive;
}
然后使用javascript只添加和删除一个类：
function toggle() {
var box = document.getElementById('box');
var parent = document.getElementById('parent');
if (box.checked) {
parent.className = parent.className + "checked";
} else {
parent.className = "";
}
}
1。我想知道输入复选框是否是创建切换的正确元素
切换的定义*：
计算以相同方式操作但具有在连续的场合产生相反的效果。
复选框**的解释：
在计算中，复选框(复选框、tickbox或tick-box)是图形用户界面元素(小部件)，允许用户做出二元选择，即在两个可能的选项中选择一个相互排斥的选项。
所以是的，这是最好的选择。
2.我还想知道如何撤消if子句中的内容：否则我必须重复我的样式表吗？或者有没有一种更短、更整洁的方法可以回到初始状态
为了做到这一点，你可以使用jQuery:
使用addClass()/removeCLass()方法或toggleClass()方法；您可以将活动的类样式放入一个新的类中，应用这些样式，然后在else/off状态下简单地删除它们。这也意味着要保持内容和样式之间的分离。
或常规JS:
.setAttribute("class", "active");和.removeAttribute("class", "active");或简单地.removeAttribute("style");来取消设置内联应用的样式并恢复到原始状态。
*源
**源
回答第二个问题：
您可以使用getElementById("id").removeAttribute("style");来删除内联样式。
if (box.checked) {
first.style.color = 'red';
second.style.border = '2px dotted blue';
third.style.background = 'olive';
} else {
first.removeAttribute("style")
second.removeAttribute("style")
third.removeAttribute("style")
}