Switch button function implemented by jquery.onoff

This article mainly introduces the simple switch button function implemented by jquery.onoff. It is very good and has certain reference value. Friends in need can refer to it

## A small button plug-in, first introduce css and 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 and only need to write an input

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

Then you only need to add an .onoff() to js

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

You will find that an ordinary checkbox becomes a switch button

Regarding color and style, you can find the corresponding position in css and modify it yourself

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; 
}

About events

I click the switch to display the modal box

JQ control switch only needs this

$(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+='
'+ 
                  '
'+data[i].taskType.taskTypeName+'
'+ 
                  '
' 
                for(var j in taskTypeSubs){ 
                  html+='
'+ 
                      ''+ 
                      ''+taskTypeSubs[j].subTaskName+''+ 
                      ''+ 
                    '
' 
                } 
                html+='
' 
            } 
            $('#auditBox').append(html); 
            $('input[type=checkbox]').onoff(); 
          } 
           
        } 
      });*/ 
    } 
     
  }) 
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jQuery implements the method of monitoring all ajax requests on the page

Implements global validation under bootstrapValidator based on jQuery

The above is the detailed content of Switch button function implemented by jquery.onoff. For more information, please follow other related articles on the PHP Chinese website!