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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
vue中轮训器的使用
Jan 27 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php导出CSV抽象类实例
2014/09/24 PHP
JS 对象介绍
2010/01/20 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS函数的几种定义方式分析
2015/12/17 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
django批量导入xml数据
2016/10/16 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python2与Python3的区别实例总结
2019/04/17 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python中调试或排错的五种方法示例
2019/09/12 Python
django项目中新增app的2种实现方法
2020/04/01 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
编辑求职信样本
2013/12/16 职场文书
1亿有多大教学反思
2014/05/01 职场文书
党在我心中演讲稿
2014/09/02 职场文书
公司股东合作协议书
2014/09/14 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
运动会跳远广播稿
2015/08/19 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS