点击切换开关的表单样式
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'); } });