如何确定CSS切换输入的“切换”状态？(How to determine the 'toggle' status of a CSS toggle input?)

 我想实现一个基于CSS的切换/切换输入。 我发现以下链接的例子非常简单，根本不使用JavaScript。 问题在于它缺少关于如何确定'切换'状态的解释 
 
 http://www.w3schools.com/howto/howto_css_switch.asp 
 
 这是完整的参考代码： 
 
 
 
 
 
  
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
  
<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
 
 
 
 

I would like to implement a CSS-based toggle/switch input. I found the example of the following link which is really easy and not using javascript at all. The problem is that it's lacking the explanation of how to determine the 'toggle' status
 
http://www.w3schools.com/howto/howto_css_switch.asp
 
This is the full code for reference:
 
 
 
 
 
  
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
  
<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
 
 
 
 

原文：https://stackoverflow.com/questions/40317740