Jquery结合css写开关按钮，拨动开关

news/2024/7/19 13:24:04 标签: jquery, js, html, css

htmledit_views">

Jquery结合css写的开关

效果

CSS

.choose-btn2 { display: none; }
.choose-label2 { box-shadow: #b1b1b1 0px 0px 0px 1px; width: 52px; height: 26px; display: inline-block; border-radius: 16px; position: relative; background-color: #bdbdbd; overflow: hidden; margin: 0; margin-top: 11px; cursor: pointer; vertical-align: middle; }
.choose-label2:before { content: ''; position: absolute; left: 4px;top:5px; width: 16px; height: 16px; display: inline-block; border-radius: 20px; background-color: #fff; z-index: 20; -webkit-transition: all 0.2s; transition: all 0.2s; }
.choose-btn2:checked + label.choose-label2:before { left: 31px; }
.choose-btn2:checked + label.choose-label2 { background-color: #009cef; box-shadow: #009cef 0px 0px 0px 1px; }
.choose-text2 { display: inline-block; vertical-align: middle; line-height: 20px; color: #666666; font-size: 12px; margin-top: 11px; }

Html

<div>
    <input type="checkbox"  id="switch2" class="choose-btn2" data-toggle="是|否">
    <label for="switch2" class="choose-label2"></label>
    <span class="choose-text2"></span>
</div>
<input type="text" style="display: none;" name="itemMain.IsGradePriceSetted"    id="isset" />

  $(".choose-btn2").click(function(){
    var texts = $(this).attr('data-toggle').split('|');
    $(this).siblings('.choose-text2').text(this.checked?texts[0]:texts[1]);
    $("#isset").val(this.checked?'Y':'N');
});
$(".choose-btn2").on("change", function(){
    var texts = $(this).attr('data-toggle').split('|');
    $(this).siblings('.choose-text2').text(this.checked?texts[0]:texts[1]);
    $("#isset").val(this.checked?'Y':'N');
});