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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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/10/02 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
vue+element ui实现锚点定位
2021/06/29 Vue.js