<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击</title>
<style>
* {
margin: 0;
padding: 0;
} .box {
position: relative;
display: block;
float: left;
width: 50px;
height: 50px;
margin-top: 100px;
margin-left: 100px;
border: 1px solid #18c250;
border-radius: 3px;
} input[type=checkbox]:checked + label .box:before {
content: "";
position: absolute;
top: 28px;
left: 2px;
width: 23px;
height: 3px;
background-color: #18c250;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
} input[type=checkbox]:checked + label .box:after {
content: "";
position: absolute;
top: 24px;
left: 15px;
width: 37px;
height: 3px;
background-color: #18c250;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
} .info {
float: left;
margin-top: 92px;
margin-left: 10px;
font-size: 48px;
user-select: none;
} label {
display: inline-block;
max-width: 100%;
} input[type=checkbox]{
display: none;
} </style>
</head>
<body>
<input id="input" type="checkbox">
<label for="input">
<span class="box"></span>
<span class="info">已阅读协议书</span>
</label>
</body>
</html>
效果：
注意点：input要写在label前面，因为 + 选择器指的是兄弟元素中的弟弟元素，不包括哥哥元素。
写这个的初衷就在于那个亘古不变的道理，能用CSS解决的就不用js
在来个炫酷点的开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #abcdef;
}
input{
display: none;
}
.switch{
position: relative;
display: block;
width: 38px;
height: 20px;
cursor: pointer;
user-select: none;
margin-top: 100px;
margin-left: 100px;
border-radius: 10px;
background-color: #b0b0b0;
}
.switch:before{
content: 'OFF';
position: absolute;
top: 1px;
right: 2px;
font-size: 12px;
color: #fff;
transform: scale(.75);
-webkit-transform: scale(.75);
}
.switch:after{
content: "";
position: absolute;
top: -1px;
left: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #fff;
-webkit-transition: left 200ms linear;
}
input[type=checkbox]:checked + label .switch{
background-color: #18c250;
}
input[type=checkbox]:checked + label .switch:before{
content: "ON";
right: 15px;
}
input[type=checkbox]:checked + label .switch:after{
left: 25px;
}
</style>
</head>
<body>
<input id="input1" type="checkbox">
<label for="input1">
<a class="switch"> </a>
</label>
<input id="input2" type="checkbox">
<label for="input2">
<a class="switch"> </a>
</label>
</body>
</html>
效果：