建站教程

建站教程

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