点击切换开关的表单样式
html 代码
<div class="a-checkbox-yesORno"> <input type="checkbox" checked id="checkbox" name="status"> <label for="checkbox"><i class="y">是</i><i class="n">否</i><span class="slide"></span></label> </div>
css代码
.a-checkbox-yesORno{
border:1px solid #d5d5d5;
display:inline-block;
height:22px;
overflow:hidden;
border-radius:3px;
position:relative;
box-shadow:0 0 3px #d5d5d5;
}
.a-checkbox-yesORno input{
display:none;
}
.a-checkbox-yesORno label i{
display:block;
float:left;
padding:0 8px;
height:22px;
line-height:22px;
color:#fff;
}
.a-checkbox-yesORno label i.y{
background:#53a93f;
}
.a-checkbox-yesORno label i.n{
background:#ed4e2a;
}
.a-checkbox-yesORno .slide{
display:block;
position:absolute;
top:0px;
left:0px;
width:50%;
height:100%;
background:#fff;
cursor:pointer;
}js代码
// .a-checkbox-yesORno样式
$('.a-checkbox-yesORno .slide').click(function(){
var lef = $(this).css('left');
if(lef == '0px'){
$(this).animate({'left':'50%'},'fast');
}else{
$(this).animate({'left':'0%'},'fast');
}
});
// ---初始值
$('.a-checkbox-yesORno').each(function(){
if($(this).find('input').is(':checked')){
$(this).find('.slide').animate({'left':'50%'},'fast');
}else{
$(this).find('.slide').animate({'left':'0%'},'fast');
}
});