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数组(推荐)
May 17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
js下载文件并修改文件名
May 08 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
JavaScript 声明私有变量的两种方式
Feb 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
如何删除多级目录
2006/10/09 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
JavaScript触发器详解
2007/03/10 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
对Python3 序列解包详解
2019/02/16 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python 远程开关机的方法
2020/11/18 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
2019年分享net面试的经历和题目
2016/08/07 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
高中同学聚会邀请函
2014/01/11 职场文书
党课心得体会范文
2014/09/09 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
事业单位个人总结
2015/02/12 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript