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获取页面上某个元素的代码
Mar 13 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
NOT NULL 和NULL
2007/01/15 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python常用特殊方法实例总结
2019/03/22 Python
python读取Kafka实例
2019/12/23 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
开业主持词
2014/03/21 职场文书
民政局个人整改措施
2014/09/24 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
道歉短信大全
2015/05/12 职场文书
男人帮观后感
2015/06/18 职场文书
cf战队宣传语
2015/07/13 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android