纯css实现点击事件

 <!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>

效果：