工作中遇到了一个下拉需要实现checkbox的效果,如下图

或许网上已经有实现了,但简单的功能自己实现就好了,

结构

<div class="form-control-wrap">
<div class="form-item-inputcheckbox"> </div>
</div>

样式,这里使用scss编写

.form-item-inputcheckbox{
.form-checkbox-label{
margin-bottom: 4px;margin-right: 16px;
input{
vertical-align: top;margin-right: 4px;
}
}
.form-item-input{
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.form-item-checkboxwrap{
margin:;background: #fff;border:1px solid #66afe9;padding: 10px;
max-height: 150px;overflow-y: auto;position: absolute;width: 100%;
display: none;z-index:;
}
.form-item-line {
font-weight: normal;
padding: 0 4px;
}
}

下面是脚本,比较少写jQuery的插件,写法可能不够地道,不足之处忘指出

~(function ($) {
var __root;
var checkItemTpl = '<label class="form-checkbox-label">'+
"<input type='checkbox' value='${value}' text='${text}' ${check}>${text}"+
'</label>'; function template(str, data, regexp) {
return str.replace(regexp || /\${([^{}]*)}/g, function (str, p1) {
return (data[p1]!==undefined&&data[p1]!==null&&data[p1].toString())||"";
});
}
function rander() {
__root.html('<div class="form-control form-item-input"></div><div class="form-item-checkboxwrap checkbox"></div>');
var texts = '',valHtmls = [],datas = [];
$.each(__data, function(index, val) {
val.check= val.checked ?'checked':'';
texts += template(checkItemTpl,val);
if(val.checked){
valHtmls.push(val.text);
datas.push(val.value);
}
});
__root.find('.form-item-checkboxwrap').html(texts);
renderInput(__root.find('.form-item-input'),valHtmls,datas);
}
function renderInput(input,texts,datas) {
input.html(texts.join(';')).attr('title',texts.join(';'))
.val(datas.join(';')).data('value', datas).data('text', texts);
}
function ctrl() {
var $selectWrap = __root.find('.form-item-checkboxwrap');
__root.click(function(e) {
$(this).find('.form-item-checkboxwrap').show();
e.stopPropagation();
});
__root.find('input').click(function () {
var __input = $(this).parents('.form-item-checkboxwrap').siblings('.form-item-input');
var val = $(this).val(),
text = $(this).attr('text'),
datas = __input.data('value'),
texts = __input.data('text');
if($(this)[0].checked){
datas.push(val);
texts.push(text); }else{
var i = datas.indexOf(val);
datas.splice(i,1);
texts.splice(i,1);
}
renderInput(__input,texts,datas);
});
$('body').click(function() {
$selectWrap.hide();
});
}
$.fn.selectCheckbox = function(option){
__root = $(this);
__data = option.data;
rander();
ctrl();
}
})(jQuery)

调用脚本

var values = [{
checked: true,
text: "男",
value: "male"
}, {
checked: true,
text: "女",
value: "female"
}, {
checked: false,
text: "未知",
value: "unknown"
}];
$('.form-item-inputcheckbox').selectCheckbox({data:values});

生成的效果:

取出数据的时候已经选择的数据时候需要调用

$('.form-item-input').data()

实现浏览器遗漏的原件 jQuery.selectCheckbox的更多相关文章

  1. 在火狐、360等浏览器中,用jquery创建表单并发送的问题

    某些浏览器无法使用js或者jquery直接创建表单并发送,这是由于这些浏览器在提交页面表单时要求页面有完整的标签项即<html><head><title></ ...

  2. 深入浏览器兼容 细数jQuery Hooks 属性篇

    关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...

  3. 浏览器下载/导出文件 及jQuery表单提交

    1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...

  4. 能跨域和跨浏览器的flashcookie for jquery插件

    对于写网站时需要跨域和跨浏览器的可以看看这个. 引入jquery  和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯. mySwfStore.set('myKey ...

  5. pasteimg浏览器中粘贴图片jQuery插件

    pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览 ...

  6. chrome浏览器模拟手机端:jquery click()点击无效解决方法

    $(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...

  7. 浏览器console中加入jquery,测试选择元素

    一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...

  8. 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法

    监控浏览器返回功能 判断浏览器返回功能 禁用浏览器的后退按钮 JS禁止浏览器后退键 http://volunteer521.iteye.com/blog/830522/ 浏览器返回功能 判断上一页面来 ...

  9. 浏览器console中加入jquery方便调试

    var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/ ...

随机推荐

  1. centos下彻底删除MYSQL 和重新安装MYSQL

    在Centos6.3上装了一个Mysql,结果mysql库被我玩丢了(这里面管理了mysql的权限).现在采用先彻底删除,然后重新安装Mysql. 1 删除Mysql yum remove  mysq ...

  2. GitHub学习笔记

    安装 Ubuntu上安装Git sudo apt-get install git Windows上安装Git msysgit是Windows版的Git.从http://msysgit.github.i ...

  3. android Graphics(三):区域(Range)

    前言:最近几天对画图的研究有些缓慢,项目开始写代码了,只能在晚上空闲的时候捯饬一下自己的东西,今天给大家讲讲区域的相关知识,已经想好后面两篇的内容了,这几天有时间赶紧写出来给大家.有关界面开发的东东内 ...

  4. 【DWR】Annotation入门

    DWR简介:http://baike.baidu.com/view/73492.htm?fr=aladdin DWR2.0以后新增加了JDK5的注解(Annotation)功能,使用注解功能之后可以从 ...

  5. 友盟iOS微信登陆没有回调的原因

    1.在友盟文档中这样说: 链接 7.4 微信登录 添加配置文件参考文档:添加微信及朋友圈,添加相关库文件,配置URL schemes及添加系统回调 注意微信登录必须先在微信开放平台申请微信登录权限 在 ...

  6. [Swust OJ 404]--最小代价树(动态规划)

    题目链接:http://acm.swust.edu.cn/problem/code/745255/ Time limit(ms): 1000 Memory limit(kb): 65535   Des ...

  7. C Tips:显示点阵汉字的小样例

    非常简陋的一段小程序,演示怎样显示点阵字库.有时间的时候再详解. #include <stdio.h> #include <stdlib.h> struct HzkInfoSt ...

  8. Android:创建可穿戴应用 - 安装和依赖管理

    安装可穿戴应用 在开发时,你能够像一般移动应用一样直接把应用安装到可穿戴设备中. 使用adb install或者 Android Studio上的Play button. 当你准备好要公布时,你须要把 ...

  9. 关于apche无缘无故个启动不了,解决方法

    1. 对于用户不小心把apache下的conf文件不小心给修改了,可那会导致,启动不了apache, 解决办法可以重新下载一个, 64为  32位  下载地址 http://www.veryhuo.c ...

  10. BZOJ 4152: [AMPPZ2014]The Captain( 最短路 )

    先按x排序, 然后只有相邻节点的边才有用, 我们连起来, 再按y排序做相同操作...然后就dijkstra ---------------------------------------------- ...