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

桃扇骨 2022-05-24 07:23 230阅读 0赞

插件下载地址：

[https://download.csdn.net/download/lianzhang861/10431557][https_download.csdn.net_download_lianzhang861_10431557]

![70][]

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

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

html只需要写一个input

<input type="checkbox"  checked οnclick="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;
    }

关于事件

![70 1][]

我点击开关显示模态框

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+='<div class="col">'+
    									'<p οnclick="sliderDiv(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/ οnclick="showmodel(this)">'+
    										'</li>'
    								}
    								html+='</ul></div>'
    						}
    						$('#auditBox').append(html);
    						$('input[type=checkbox]').onoff();
    					}
    					
    				}
    			});*/
    		}
    		
    	})
    }

[https_download.csdn.net_download_lianzhang861_10431557]: https://download.csdn.net/download/lianzhang861/10431557
[70]: /images/20220524/e3a11fce0bf241d18eaabde582861b50.png
[70 1]: /images/20220524/cda009fb9e514896a30e212dd667dbd5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现简单的按钮选择

JavaScript实现简单的按钮选择功能分析：四个按钮，全选，全不选，全选和全不选结合，反选。 <!DOCTYPE html> <html lang

忘是亡心i/ 2023年01月08日 03:23/ 0 赞/ 157 阅读

相关 Android按钮实现不同功能,Android开发多次点击按钮实现不同的功能

![0ecd3d10c6ebda52135e9ed8a0156928.png][] 慕尼黑的夜晚无繁华实现按钮监听的实现类，并在实现类中定义标记变量，根据变量值执行不同的

た入场券/ 2022年10月17日 13:53/ 0 赞/ 219 阅读

相关 CSS开关按钮三例

我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个

Love The Way You Lie/ 2022年10月01日 08:52/ 0 赞/ 211 阅读

相关按钮开关实现背景的切换

<—————>实现了一个按钮切换多张图片的功能， boolHelloWorld::init() \{ // // 1. super init first if ( !

柔情只为你懂/ 2022年08月13日 06:59/ 0 赞/ 210 阅读

相关 SwitchButton 开关按钮的多种实现方式（附源码DEMO）

转自：[http://blog.csdn.net/vipzjyno1/article/details/23707149][http_blog.csdn.net_vipzjyno

末蓝、/ 2022年06月18日 04:07/ 0 赞/ 384 阅读

相关 ToggleButton(开关按钮)和Switch(开关)的使用

ToggleButton属性： android:disabledAlpha：设置按钮在禁用时的透明度 android:textOff：按钮没有被选中时显示的文字

淡淡的烟草味﹌/ 2022年06月17日 03:46/ 0 赞/ 334 阅读

相关 css3实现的简单开关按钮代码实例:

css3实现的简单开关按钮代码实例: 本章节分享一段代码实例，它使用css3实现了开关按钮效果。代码和网上实用的相比相对粗陋一点，但是完全能够演示它实现的原理。

逃离我推掉我的手/ 2022年06月17日 02:59/ 0 赞/ 227 阅读

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

插件下载地址： [https://download.csdn.net/download/lianzhang861/10431557][https_download.csdn.

桃扇骨/ 2022年05月24日 07:23/ 0 赞/ 231 阅读

相关 react实现开关按钮

更好看的效果图查看链接：[https://blog.csdn.net/qq\_37815596/article/details/85006053][https_blog.csd

旧城等待，/ 2022年04月15日 06:18/ 0 赞/ 408 阅读

相关开关、按钮开关、自锁开关内部结构

开关、按钮开关、自锁开关内部结构：　　![1184137-20180423093622350-202334675.png][] 转载于:https://www.cn

ゝ一纸荒年。/ 2021年09月30日 13:24/ 0 赞/ 466 阅读