bootstrap switch 按钮开关初始化加载赋值，ajax点击切换

最新推荐文章于 2025-06-22 08:39:58 发布

信天wong

最新推荐文章于 2025-06-22 08:39:58 发布

阅读量8.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： bootstrapswitch 按钮开关 ajax bootstrapswitch 初始化bootstrapswitch ajax开关按钮

本文链接：https://blog.youkuaiyun.com/m0_37934423/article/details/77049926

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap Switch插件快速实现网页上的开关按钮功能。通过简单的HTML和JavaScript代码，可以创建一个带有启用和停用状态的开关，并且能够通过AJAX请求更新服务器的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet" href="/bootstrap-switch.min.css" />

<script type="text/javascript" src="/jquery.js" ></script>
<script type="text/javascript" src="/bootstrap-switch.min.js" ></script>

最近项目需要用到开关按钮，在网上找了一下，bootstrapswitch用的简单方便。

下载地址： http://www.bootcss.com/p/bootstrap-switch

HTML代码

<div class="col-sm-6 switch" id="mySwitch">
    <input id="mySwitchOne" type="checkbox" checked />
</div>

初始化加载开关按钮：

if(whiteFlag == "0"){
    // 关
   $('#mySwitchOne').bootstrapSwitch('state',false,true);
}else{关
    // 
    $('#mySwitchOne').bootstrapSwitch('state',true,true);
}

// 点击开关切换

$('#mySwitch input').bootstrapSwitch({  
   onText:'启用',  
   offText:'停用' ,
   onColor:"success",
   offColor:"danger",  
   size:"normal",
   onSwitchChange:function(event,state){  
       if(state==true){  
    	 //启用
      	  $.ajax({
  		    type: 'POST',
  			url: '/user/enableWhitelist',
  			dataType:'json',
  			success:function(data){
  				if(data.success){
  				}else{
  					layer.msg(data.errorMessage);
  				}
  			},
  			error:function(XMLHttpRequest,textStatus){
      			layer.msg(textStatus);
      		}
      	  })
       }else{  
    	 //停用
      	  $.ajax({
  		    type: 'POST',
  			url: '/user/disableWhitelist',
  			dataType:'json',
  			success:function(data){
  				if(data.success){
  				}else{
  					layer.msg(data.errorMessage);
  				}
  			},
  			error:function(XMLHttpRequest,textStatus){
      			layer.msg(textStatus);
      		}
      	  })
   		} 
      }  
});

有些地方说的不清楚，请见谅。