Products
GG网络技术分享 2025-03-18 16:16 0
网站中的滑动选择开关是比较常见的开关选择器,方便用户可以打开或者关闭某个参数。效果如下图:
下面分享一下网站中的滑动选择开关的制作代码:
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>
Demand feedback