1.兩種開關都需要使用外部引入的js包，layui使用layui外掛包

第一種layui式開關：

①引入的外部檔案

 <link href="${ctxStatic}/layui/css/layui.css" rel="stylesheet">

 <script src="${ctxStatic}/layui/layui.js"></script>

此js我會上傳到下載資源中，供大家使用，也可以到官方網站中下載。

資源連結：

②開關監控事件：

layui.use(['form', 'layedit'], function(){
 var form = layui.form()
 ,layer = layui.layer
 ,layedit = layui.layedit;
 
 //監聽指定開關
 form.on('switch(switchTest)', function(data){
   
   layer.msg( (this.checked ? '開啟' : '關閉'), {
     offset: '400px'
   });
    if(this.checked){
    $(this).val("1");
   }else{
    $(this).val("0");
   } 
   
    //開關狀態判斷，是否新增或更新資料
    switchStatus($(this));
    
 });
});

這就是和我的業務相關的部分，讀者可以忽略【

//開關狀態判斷，是否是第一次點選開關

function switchStatus(ele){
var type=ele.next().next().next().val();
var reservationSetId=ele.next().next().val();      
var reservationName=ele.parents("tr").children().eq(1).text();//$("tr:eq(1)")
var presentation=ele.parents("tr").children().eq(2).text();//$("tr:eq(1)")
$.ajax({
url : "${ctx}/vehicle/wcrReservationSet/insertWrstByType",//按照型別插入
type:"post",
dataType:"json",
data : {"reservationSetId":reservationSetId,"type":type,"reservationName":reservationName,"presentation":presentation},
success : function(result) {//layer.msg('儲存成功！', {icon:1,time:1500});
 location.reload();
    }
    });
}

】

③開關html部分

    <form class="layui-form" action="">
  <div class="layui-form-item">
   <div class="layui-input-block">
     <input type="checkbox" id="wrst1" name="status" ${wrst1.status==true?"checked":""} class="switch"  lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
   <input type="hidden" id="wrst1Id" name="reservationSetId" value="${wrst1.reservationSetId}" />
   <input type="hidden" id="wrst1Type" name="type" value="1" />
   </div>
 </div>
    </form>

注意幾點：第一，必須是form標籤且class的值必須‘layui-form’.第二，input型別必須是checkbox，內部可以使用EL表示式與資料庫保持狀態統一

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第二種bootstrap式開關

①導包

<link href="${ctxStatic}/bootstrap/css/bootstrap-switch.css"
rel="stylesheet">
<script type="text/javascript"
src="${ctxStatic}/bootstrap/js/highlight.js"></script>
<script type="text/javascript"
src="${ctxStatic}/bootstrap/js/bootstrap-switch.js"></script>
<script type="text/javascript" 
src="${ctxStatic}/bootstrap/js/main.js"></script>

②html元素

 <div class="switch" >
 <input  type="checkbox"  id="wrst1" name="status" data-size="mini" ${wrst1.status==true?"checked":""} onchange="switchStatus(this,1,'${wrst1.reservationSetId}');" >
 </div>

③監控事件：

使用onchange方法的監控，其實我沒有使用bootstrap裡面的監控，感覺不好用，所以使用onchange事件監控

/*
監控開關：第一次插入資料，以後再點選只是修改status
*/
function switchStatus(ele,type,reservationSetId){

//定義變數，取出Id和type值
var reservationName=$(ele).parents("tr").children().eq(1).text();//$("tr:eq(1)")
var presentation=$(ele).parents("tr").children().eq(2).text();//$("tr:eq(1)")
var status=$(ele).prop("checked");

$.ajax({
url : "${ctx}/vehicle/wcrReservationSet/insertWrstByType",//按照型別插入
type:"post",
dataType:"json",
async:true,
data : {"reservationSetId":reservationSetId,"type":type,"reservationName":reservationName,"presentation":presentation,"status":status},
success : function(result) {
//如果第一次新增，友好提示：開啟此項服務，以後只是顯示開啟、關閉兩種狀態
if(result==1){
layer.msg('開啟-'+reservationName+'-服務！',{time:1500},function(index){
location.reload(); 
});
}else{
if(status==true){
layer.msg('啟用', {time:1500},function(index){
//location.reload();
});
}else{
layer.msg('不啟用', {time:1500},function(index){
//location.reload();

});
}
}
}
});
}

OK ,如果有問題，可以諮詢本人或查詢資料，本人QQ:2537875330