<div class="box">
<header>iOS按钮效果</header>
<div class="phone">
<span class="btn btnActive">
<input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
</span>
<span class="btn btnActive">
<input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
</span>
<span class="btn btnActive">
<input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
</span>
</div>
</div>
.box {
margin: 0 auto;
text-align: center;
}
header {
max-width: 768px;
color: #111111;
}
.phone {
width: 100%;
text-align: center;
}
.btn {
display: block;
width: 50px;
height: 23px;
border-radius: 15px;
margin: 40px auto;
position: relative;
}
.btn0 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
}
.btn:before {
content: ' ';
position: absolute;
top: 1px;
bottom: 0;
width: 21px;
height: 21px;
border-radius: 50%;
box-shadow: 0 0 2px #444444;
}
.btnActive {
background-color: #65da65;
border: 2px solid #65da65;
}
.btnActive::before {
background-color: #ffffff;
right: 1px;
}
.btnunActive {
background-color: #ffffff;
border: 2px solid #eeeeee;
}
.btnunActive::before {
background-color: #65da65;
left: 0;
top: 0;
width: 23px;
height: 23px;
}
<script>
$(function () {
var btn = $("input[name='iosStyle']");
$("input[name='iosStyle']").each(function (i) {
$(this).click(function () {
var _this = $(this).parent();
if (_this.hasClass('btnActive')) {
_this.removeClass('btnActive');
_this.addClass('btnunActive');
$(this).eq(0).attr("checked", false);
} else if (_this.hasClass('btnunActive')) {
_this.removeClass('btnunActive');
_this.addClass('btnActive');
$(this).eq(0).attr("checked", true);
}
});
});
})
</script>