switchery插件:多个按钮,用jquery进行切换

清疚 2021-11-10 02:48 474阅读 0赞

单个按钮可以参照这个链接[https://blog.csdn.net/u012233776/article/details/53305846][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>

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);//关闭

转载于:https://www.cnblogs.com/init-007/p/11204236.html

[https_blog.csdn.net_u012233776_article_details_53305846]: https://blog.csdn.net/u012233776/article/details/53305846

发表评论取消回复

表情：

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

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

相关阅读

相关 Jquery UI常用插件

Jquery UI常用插件 -------------------- 拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素，当这个j

本是古典何须时尚/ 2022年09月28日 13:02/ 0 赞/ 184 阅读

相关 Jquery常用插件

Jquery常用插件 -------------------- 表单插件——form 通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器

Dear 丶/ 2022年09月28日 13:01/ 0 赞/ 212 阅读

相关 jQuery圆形菜单旋转切换插件

[下载地址][Link 1]jQuery圆形菜单旋转切换插件是一款jQuery基于CSS3属性制作的圆形图标菜单轮播切换效果。 ![1631277723.png][] dd

偏执的太偏执、/ 2022年09月11日 02:29/ 0 赞/ 165 阅读

相关 jQuery动画、图片切换 KinSlideshow jQuery 多样式图片幻灯片插件

$(function(){ $("KinSlideshow").KinSlideshow({ moveS

忘是亡心i/ 2022年04月06日 15:10/ 0 赞/ 296 阅读

相关 KinSlideshow幻灯片插件 Jquery幻灯片图片切换

$(function(){ $("KinSlideshow").KinSlideshow({ moveS

àì夳堔傛蜴生んèń/ 2022年03月20日 04:50/ 0 赞/ 334 阅读

相关强烈推荐：240多个jQuery插件

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 概述 jQuery 是继 prototype 之后

柔情只为你懂/ 2022年01月16日 06:47/ 0 赞/ 272 阅读

相关 8000个JQuery特效（插件）

> 各式各样的JQuery场景实现，可供项目使用，请注意插件版本和浏览器适配 ![目录01][01] ![目录02][02] 下面是下载地址 ![下载地址][7

谁借莪１个温暖的怀抱￠/ 2022年01月11日 09:39/ 0 赞/ 291 阅读

相关用键盘方向键控制页面切换的 jQuery 插件

[http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/][http_www.alessandr

女爷i/ 2022年01月06日 13:25/ 0 赞/ 173 阅读

相关强烈推荐：240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k

朱雀/ 2021年12月17日 16:21/ 0 赞/ 373 阅读

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

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

清疚/ 2021年11月10日 02:48/ 0 赞/ 475 阅读