CSS+JS复选框开关
Posted mankii
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS+JS复选框开关相关的知识,希望对你有一定的参考价值。
HTML
<input type="checkbox" name="switch2" id="switch2" class="choose-btn" data-toggle="开启|关闭"> <label for="switch2" class="choose-label"></label> <span class="choose-text"></span>
* 注意input的id和label的for必须一致
* 如果无需显示开关提示文字,则不需要choose-text
CSS
.choose-btn display: none; .choose-label box-shadow: #b1b1b1 0px 0px 0px 1px; width: 30px; height: 16px; display: inline-block; border-radius: 16px; position: relative; background-color: #bdbdbd; overflow: hidden; margin: 0; margin-top: 4px; cursor: pointer;vertical-align: middle; .choose-label:before content: ‘‘; position: absolute; left: 0; 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-btn:checked + label.choose-label:before left: 14px; .choose-btn:checked + label.choose-label background-color: #009cef; box-shadow: #009cef 0px 0px 0px 1px;
JS(需要Jquery)如果无需显示开关提示文字,则不需要js
$(document).ready(function() $(".choose-btn").each(function() var texts = $(this).attr(‘data-toggle‘).split(‘|‘); $(this).siblings(‘.choose-text‘).text(this.checked?texts[0]:texts[1]); ); $(".choose-btn").on("change", function() var texts = $(this).attr(‘data-toggle‘).split(‘|‘); $(this).siblings(‘.choose-text‘).text(this.checked?texts[0]:texts[1]); ); );
效果:
以上是关于CSS+JS复选框开关的主要内容,如果未能解决你的问题,请参考以下文章