iphone点击滑动图标确定效果

html

<div class="wn-radio-box">
	<input name="def_addr" value="" type="checkbox" class="input-action" style="display: none">
	<span class="wn-radio-ball"></span>
</div>

css

.wn-radio-box {
    right: .3rem;
    top: .6rem;
    width: 3rem;
    height: 1.8rem;
    border-radius: 28px;
    background: #a2a2a2;
    margin-top: .16rem;
    margin-right: .2rem;
    position: absolute;
    transition: .5s background linear;
}
.wn-radio-ball {
    width: 1.4rem;
    height: 1.4rem;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: .2rem;
    top: .2rem;
}

js

  var radio_default = false;
  $('.wn-radio-box').click(function(event) {
    if(!radio_default){
      $('.wn-radio-ball').animate({
            'left':'1.48rem'
      }, 500)
      $('.wn-radio-box').css({
            'background-color':'#006cb7'
      }, 500)
      $('.input-action').prop("checked",true)
      radio_default = true;
    }else{
      $('.wn-radio-ball').animate({
            'left':'.2rem'
      }, 500)
      $('.wn-radio-box').css({
            'background-color':'#a2a2a2'
      }, 500)
      $('.input-action').prop("checked",false)
      radio_default = false;
    }
  });