bootstrap 设置checkbox部分选中效果


Posted in Javascript onApril 20, 2017

在很多页面都会需要根据加载的数据来控制checkbox是否选中,以前的方法在这个UI里并不适用,现贴下两种代码供大家参考。

前提条件:该字段在数据库中是以“,”间隔的字符串,如:“WIFI,电视,有线宽带”

第一种:普通checkbox

var servicesArray = data.Services.split(",");//数据库里获取到的值
          $("input[type=checkbox][name=chkServices]").each(function (i, e) {
            for (var i = 0; i < servicesArray.length; i++) {
              if ($(this).val() == servicesArray[i]) {
                $(this).checked = true;//这里是直接设置checked为true
              }
            }
          });

第二种:bootstrap里的checkbox

var servicesArray = data.Services.split(",");
          $("input[type=checkbox][name=chkServices]").each(function (i, e) {
            for (var i = 0; i < servicesArray.length; i++) {
              if ($(this).val() == servicesArray[i]) {
                $(this).iCheck('check');
              }
            }
          });

结果如下:

bootstrap 设置checkbox部分选中效果

End

以上就介绍了bootstrap 设置checkbox部分选中效果,包括了方面的内容,希望对Javascript教程有兴趣的朋友有所帮助。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
You might like
用PHP读取超大文件的实例代码
2012/04/01 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
prototype1.4中文手册
2006/09/22 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
基于javascript实现listbox左右移动
2016/01/29 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python中的文本处理
2015/04/11 Python
python中的闭包用法实例详解
2015/05/05 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python通过实例讲解反射机制
2019/10/17 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
经典c++面试题二
2015/08/14 面试题
开工典礼策划方案
2014/05/23 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
商场营业员岗位职责
2015/04/14 职场文书
离婚代理词范文
2015/05/23 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js