怎么制作网站中的滑动选择开关

网站中的滑动选择开关是比较常见的开关选择器，方便用户可以打开或者关闭某个参数。效果如下图：

下面分享一下网站中的滑动选择开关的制作代码：

HTML代码：

<div class="sliderkkk">
<input type="checkbox" id="togglebtn" name="addpageok" value="<?php echo get_option('addpageok');?>"  />
<label for="togglebtn"></label>
</div>

JQUERY代码：

<script>
var toggle = document.getElementById('togglebtn');

toggle.addEventListener('change', function() {
if (this.checked) {

jQuery(this).val('1');

jQuery('.sliderkkk').addClass('bluess');
// 处理选中状态的逻辑

console.log('开关已打开');
} else {

jQuery(this).val('0');

jQuery('.sliderkkk').removeClass('bluess');
// 处理未选中状态的逻辑

console.log('开关已关闭');
}
});</script>