工作中遇到了一个下拉需要实现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. hdu 4679 (树形DP)

    题意:给一棵树,边的权值都是1,摧毁每条边是有代价的,选择摧毁一条边,把一棵树分成两部分,求出两部分中距离最大的两点的距离,求出距离*代价最小的边,多条的话输出序号最小的. 刚开始理解错题意了,wro ...

  2. N皇后( DFS,推荐)

    N皇后问题 Description   在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.          你的任 ...

  3. linux脚本:ftp自动传输文件

    使用Shell脚本实现ftp的自动上传下载 http://liwenge.iteye.com/blog/566515 open 192.168.1.171 user guest 123456cd /h ...

  4. Python 模块(五)

    目录 模块介绍 time &datetime模块 random json & picle 一.模块介绍 在我们日常的程序开发过程中,随着代码越写越多,在单个文件里的代码就会越来越长,越 ...

  5. JAVA的一些小笔记

    构造块优先于构造方法执行,而且每当有一个新的实例化对象产生时,就会重复执行构造块的程序. 静态块优先于构造块执行,而且不管有多少个实例化对象产生,静态块只会执行一次,它的主要作用是为类中的static ...

  6. 基于FPGA的DW8051移植(一)

    最近 半个月都在移植8051,看到DW8051内核资料比较齐全又是新思发布的,所以就开始玩弄 可是这半个月的努力几近白费 —— 移植失败了,不知道从何着手这个内核.可能大家能找到不同的版本,我的是最初 ...

  7. About Us - Tech in Asia - Tech in Asia

    About Us - Tech in Asia - Tech in Asia About us Asia is big. Its place in the world, even bigger. Te ...

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

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

  9. hdu1730 Northcott Game,Nim-sum

    题解: 转化成求Nim-sum 每行黑白棋的初始间距作为每堆石子个数 假设当前为P态,则无论当前选手如何操作,下一个选手都能使其操作后的局面又变为P态. Nim-sum = 0,即P态. #inclu ...

  10. ArrayList集合-[习题]--C#

    :向集合中添加10个元素,计算平均值,求最大.最小值. ; list.AddRange(, , , , , , , , }); int Max, Min; Max = Min = (]; ; i &l ...