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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
Vue.js表单控件实践
Oct 27 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
微信小程序自动客服功能
Nov 02 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JS开发前端团队展示控制器来为成员引流
Aug 14 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python Tkinter基础控件用法
2014/09/03 Python
十个Python程序员易犯的错误
2015/12/15 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
如何选择使用结构还是类
2014/05/30 面试题
预备党员转正思想汇报
2014/01/12 职场文书
致裁判员加油稿
2014/02/08 职场文书
个人委托函范文
2015/01/29 职场文书
学习委员竞选稿
2015/11/20 职场文书