怎麼製作網站中的滑動選擇開關

網站中的滑動選擇開關是比較常見的開關選擇器，方便用戶可以打開或者關閉某個參數。效果如下圖：

下面分享一下網站中的滑動選擇開關的製作代碼：

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>