CSS制作Switch开关及能和后端进行交互

最新推荐文章于 2024-10-10 01:16:57 发布

w_十二

最新推荐文章于 2024-10-10 01:16:57 发布

阅读量222

点赞数

文章标签： css css3 前端

原文链接：https://www.cnblogs.com/dinghuihua/p/6674106.html

版权

开头

原作者：https://www.cnblogs.com/dinghuihua/p/6674106.html
没法与后台做交互，简单修改了一下

代码

 .chooseBtn {
  display: none;
}

.choose-label {
    box-shadow: #ccc 0px 0px 0px 1px;
    width: 40px;
    height: 20px;
    display: inline-block;
    border-radius: 20px;
    position: relative;
    background-color: #bdbdbd;
    overflow: hidden;
}

.choose-label:before {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 20px;
    background-color: #fff;
    z-index: 20;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.chooseBtn:checked + label.choose-label:before {
    left: 20px;
}

.chooseBtn:checked + label.choose-label {
    background-color: #51ccee;
}

html

<div style="display: flex; justify-content: end; padding-bottom: 20px; width: 95%;">
    <input type="checkbox" id="隐藏的checkboxId" class="chooseBtn"/>
    <label class="choose-label" onclick="choseCheck(this)"></label>
</div>

$(document).ready(function () {
    let state =  $("#后端返回则页面隐藏值").val()
    if (state === '0') {
        $("#隐藏的checkboxId").prop("checked", false)
    } else {
        $("#隐藏的checkboxId").prop("checked", true)
    }
})
// 执行业务逻辑即可
function choseCheck(e) {
	// 点击label修改checkbox状态
    let check = $(e).prev().prop("checked")
    $(e).prev().prop("checked", !check)
}