switchery插件:多个按钮,用jquery进行切换
2024-08-24 04:37:59
单个按钮可以参照这个链接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);//关闭
最新文章
- ActiveMQ消息队列的使用及应用
- 【数学】Jersey Politics
- [bzoj3694]最短路
- iOS真机调试
- UICollectionView基础
- 好用的ASP.NET 分页类 简单好用 支持 AJAX 自定义文字
- RabbitMQ 原文译02--工作队列
- ANDROID_MARS学习笔记_S04_004_用HTTPCLENT发带参数的get和post请求
- 转:单片机C语言中的data,idata,xdata,pdata,code
- Memcached和Redis异同
- hdu1540-Tunnel Warfare (线段树区间合并)
- 杭电oj1062 Text Reverse
- CSS3学习之——【特殊属性】
- C#设计模式整理
- vue 导航栏切换
- 2017年3月28日15:59:16 终于明白spring这套鬼东西是怎么玩的了
- CSS hack 360浏览器 极速模式与兼容模式
- PythonStudy——字符串扩展方法 String extension method
- laravel数据库配置
- ubuntu14.04 解析不了域名—ubuntu的DNS配置