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 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
JavaScript实现留言板案例
Mar 17 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php学习之运算符相关概念
2011/06/09 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python简单文本处理的方法
2015/07/10 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
django 自定义过滤器的实现
2019/02/26 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
用django设置session过期时间的方法解析
2019/08/05 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python对execl 处理操作代码
2020/06/22 Python
python如何快速生成时间戳
2020/07/21 Python
职员竞岗演讲稿
2014/05/14 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
素质拓展训练感想
2015/08/07 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL