单个按钮可以参照这个链接https://blog.csdn.net/u012233776/article/details/53305846

多个按钮时,

html中其中想操作这个按钮开启与关闭

<div class="form-group">    <label class="col-sm-3 control-label">付费用户2</label>    <div class="col-sm-8">        <input type="checkbox" name="ss" value="1" class="js-switch test" />    </div></div><!--<div class="hr-line-dashed"></div>-->

js

/**
* 切换Switchery开关函数 switchElement Switchery对象,checkedBool 选中的状态
*/
function setSwitchery(switchElement, checkedBool) {
if((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
switchElement.setPosition(true);
switchElement.handleOnchange(true);
}
} // 切换按钮初始化
var switchery = [];
var elems = document.querySelectorAll('.js-switch');
for (var i = 0; i < elems.length; i++) {
switchery[i] = new Switchery(elems[i]);
}

现在就需要获取需要切换的dom的index

var js_switch_index = $('.js-switch').index($('.js-switch.test'));
setSwitchery(switchery[js_switch_index], true);//开启
setSwitchery(switchery[js_switch_index], false);//关闭

switchery插件:多个按钮,用jquery进行切换的更多相关文章

  1. 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  2. 瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!   前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...

  3. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  4. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  5. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  6. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  7. 不定义JQuery插件,不要说会JQuery 分类: JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  8. [转]不定义JQuery插件,不要说会JQuery

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...

  9. 不定义JQuery插件,不要说会JQuery

    转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...

随机推荐

  1. tomcat服务监控分析及自启

    #! /bin/bash # process-monitor.sh serverName="/usr/local/apache-tomcat-7.0.72-8080" #获取进程i ...

  2. 【加解密】使用CFSSL生成证书并使用gRPC验证证书

    写在前面的话 CFSSL是CloudFlare旗下的PKI/TLS工具.可以用于数字签名,签名验证和TLS证书捆绑的命令行工具和HTTP API服务器. 是使用golang语言开发的证书工具. 官方地 ...

  3. DVWA(二): Brute Force(全等级暴力破解)

    tags: DVWA Brute Force Burp Suite Firefox windows2003 暴力破解基本利用密码字典使用穷举法对于所有的账号密码组合全排列猜解出正确的组合. LEVEL ...

  4. STM32—SPI详解

    目录 一.什么是SPI 二.SPI协议 物理层 协议层 1.通讯时序图 2.起始和停止信号 3.数据有效性 4.通讯模式 三.STM32中的SPI 简介 功能框图 1.通讯引脚 2.时钟控制逻辑 3. ...

  5. Android手机QQ的UI自动化实践

    本文首发于果的博客园,原文链接:https://www.cnblogs.com/yuxiuyan/p/14992682.html, 转载请注明出处. UI自动化 我们为什么要搞UI自动化 可能很多同学 ...

  6. NOIP 模拟 $21\; \rm Median$

    题解 \(by\;zj\varphi\) 对于这个序列,可以近似得把它看成随机的,而对于随机数列,每个数的分布都是均匀的,所以中位数的变化可以看作是常数 那么可以维护一个指向中位数的指针,同时维护有多 ...

  7. dubbo-admin管理控制台安装

    拉项目切换分支到master git clone https://github.com/apache/dubbo-admin.git /var/tmp/dubbo-admin 打开项目修改配置 dub ...

  8. mysql行转列 问题 SUM(IF(条件,列值,0))

    sum(if(条件,列值,0))语法用例: select name,sum(if(subject="语文",score,0)) as "语文" from gra ...

  9. python turtle的使用

    turtle.pendown() # 放下画笔  turtle.penup() # 抬起画笔  turtle.pensize(int) # 设置画笔宽度,值为整数型  turtle.forward(f ...

  10. JDBC中级篇(MYSQL)——在JDBC中如何获得表中的,自增长的字段值

    注意:其中的JdbcUtil是我自定义的连接工具类:代码例子链接: package c_increment; import java.sql.Connection; import java.sql.P ...