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 比较时间大小的代码
Apr 24 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
electron中使用bootstrap的示例代码
Nov 06 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
浅析JavaScript中的变量提升
Jun 01 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合并数组函数array_merge用法分析
2017/02/17 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python 魔法函数实例及解析
2019/09/25 Python
Python 解析xml文件的示例
2020/09/29 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
毕业自我鉴定
2013/11/05 职场文书
安全资料员岗位职责
2013/12/14 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
员工保密协议书
2014/09/27 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python