jquery.onoff实现的开关按钮功能

一个按钮小插件，首先引入css和js

<script type="text/javascript" src="../js/jquery-1.11.3.js" ></script> 
 <link rel="stylesheet" href="../js/dist/jquery.onoff.css" rel="external nofollow" /> 
 <script type="text/javascript" src="../js/dist/jquery.onoff.js" ></script>

html只需要写一个input

<input type="checkbox" checked onclick="showmodel(this)"/>

然后js中只需要加一个.onoff()

$('input[type=checkbox]').onoff();

你会发现一个普通的checkbox变成了开关按钮

关于颜色和样式，自己去css中找到相应的位置修改即可

onoffswitch-inner:before { 
 content: "OFF"; 
 padding-left: 3px; 
 color: #FFFFFF; 
 background-color: #A14776; 
} 
onoffswitch-inner:after { 
 content: "ON"; 
 padding-right: 5px; 
 color: #999999; 
 background-color: #EEEEEE; 
 text-align: right; 
}

关于事件

我点击开关显示模态框

jq控制开关只需要这样就行

$(ele).prop("checked",true) //或false

function showmodel(ele){ 
 if(!$(ele).is(':checked')){ 
 var htmls=$(ele).parent().siblings('span').html(); 
 $('.mask').show(); 
 $('#reportName').html(htmls); 
 $('#yzmBox').html(mathRand()); 
 } 
 $(".cancel").unbind().click(function(){ 
 $(ele).prop("checked",true) 
 $('.mask').hide(); 
 }) 
 $(".sure").unbind().click(function(){ 
 if($(".telBox input").val()==$('#yzmBox').html()){ 
 /*$.ajax({ 
 url: ipAddress + "/MMSDailyBackstage/task2/getTaskTypes", 
 data:{"areaCode":"01","roleCode":"dhxt","appCode":"day_report","imei":"111111111111111"}, 
 type : "POST", 
 dataType: "json", 
 cache: false, 
 async: false, 
 success:function(json){ 
 var data=json.data; 
 var html=""; 
 if(json.success){ 
 for(var i in data){ 
 var taskTypeSubs=data[i].taskTypeSubs; 
 html+='<p class="col">'+ 
 '<p onclick="sliderp(this)"><span class="arrow down_a"></span><span>'+data[i].taskType.taskTypeName+'</span></p>'+ 
 '<ul class="lidetail">' 
 for(var j in taskTypeSubs){ 
 html+='<li>'+ 
 '<img src="../img/aduiticon.png">'+ 
 '<span>'+taskTypeSubs[j].subTaskName+'</span>'+ 
 '<input type="checkbox" checked/ onclick="showmodel(this)">'+ 
 '</li>' 
 } 
 html+='</ul></p>' 
 } 
 $('#auditBox').append(html); 
 $('input[type=checkbox]').onoff(); 
 } 
 
 } 
 });*/ 
 } 
 
 }) 
}