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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
javascript preload&amp;lazy load
May 13 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Vue中util的工具函数实例详解
Jul 08 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python调用webservice接口的实现
2019/07/12 Python
pytest中文文档之编写断言
2019/09/12 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
企业人事任命书
2014/06/05 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年消防工作总结
2015/04/24 职场文书
失恋33天观后感
2015/06/11 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js