Switch button function implemented by jquery.onoff-JS Tutorial-php.cn

Switch button function implemented by jquery.onoff

不言

Release： 2018-07-04 10:08:46

Original

3259 people have browsed it

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>

Copy after login

html and only need to write an input

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

Copy after login

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

$(&#39;input[type=checkbox]&#39;).onoff();

Copy after login

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

Copy after login

About events

I click the switch to display the modal box

JQ control switch only needs this

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

Copy after login

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); 
            $(&#39;input[type=checkbox]&#39;).onoff(); 
          } 
           
        } 
      });*/ 
    } 
     
  }) 
}

Copy after login

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!