当前位置：首页 > jquery

jquery开关按钮

2026-02-04 07:22:25jquery

jQuery 开关按钮实现方法

使用 jQuery UI 的 Switch 按钮

jQuery UI 提供了一个 switch 按钮组件，可以通过以下方式实现：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="switch"></div>

<script>
$(function() {
  $("#switch").switch({
    change: function(event, ui) {
      console.log("Switch state:", ui.value);
    }
  });
});
</script>

自定义 CSS 和 jQuery 实现

创建一个简单的开关按钮：

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
</style>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<script>
$(document).ready(function(){
  $('.switch input').change(function(){
    if($(this).is(':checked')) {
      console.log("开关已打开");
    } else {
      console.log("开关已关闭");
    }
  });
});
</script>

使用 Bootstrap Switch 插件

Bootstrap Switch 是一个流行的 jQuery 插件：

<link href="https://cdn.jsdelivr.net/npm/bootstrap-switch@3.3.4/dist/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-switch@3.3.4/dist/js/bootstrap-switch.min.js"></script>

<input type="checkbox" name="my-switch" id="switch" checked>

<script>
$(function() {
  $('#switch').bootstrapSwitch();

  $('#switch').on('switchChange.bootstrapSwitch', function(event, state) {
    console.log(state);
  });
});
</script>

使用 iCheck 插件

iCheck 提供了美观的复选框和单选按钮：

<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/square/blue.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<input type="checkbox" id="switch">

<script>
$(function(){
  $('#switch').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%'
  });

  $('#switch').on('ifChanged', function(event){
    console.log($(this).is(':checked'));
  });
});
</script>