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阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js select option对象小结
Dec 20 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
对Python中的@classmethod用法详解
2018/04/21 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
美国家具网站:Cymax
2016/09/17 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
公司聘任书模板
2014/03/29 职场文书
出国留学经济担保书
2014/04/01 职场文书
党课培训心得体会
2014/09/02 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技