小编Cha*_*ell的帖子

我使用我非常喜欢的 CSS 制作了一个“切换”UI 元素。它旨在用于开/关场景。基本上，一个花哨的复选框。我的开关在 html 中定义如下：

html

<label class="switch"><input id="mySwitchCheckbox" type="checkbox" /><span id="switchText>Off</span></label>
<script type="text/javascript">
  $('.switch > checkbox').on('change', function(e) {
    alert('here');
    var isChecked = // what goes here?
    if (isChecked) {
      alert('turned on');
    } else {
      alert('turned off');
    }
  });
</script>

我的这个组件的 css 看起来是这样的：

css

.switch {
  cursor:pointer;
  display:inline-block; 
  margin:1px 0;
  position:relative;
  vertical-align:middle
}

.switch input {
  filter:alpha(opacity=0);
  opacity:0;
  position:absolute;
}

.switch span {
  background-color:#c9c9c9; 
  border-radius:12px;
  border:1px solid #eee;    
  display:inline-block; 
  position:relative;
  height:24px;  
  width:52px;
  -webkit-transition:background-color .33s;
  transition:background-color .33s
}

.switch span:after …