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面向对象设计一 工厂模式
Dec 20 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jquery实现保存已选用户
Jul 21 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
详细分析vue表单数据的绑定
2020/07/20 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
深入理解Python变量与常量
2016/06/02 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python中单例模式总结
2018/02/20 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python爬取网页信息的示例
2020/09/24 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
青年安全生产示范岗事迹材料
2014/05/04 职场文书
简单租房协议书
2014/10/21 职场文书
公积金接收函格式
2015/01/30 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书