实现浏览器遗漏的原件 jQuery.selectCheckbox

工作中遇到了一个下拉需要实现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: 0;background: #fff;border:1px solid #66afe9;padding: 10px;
        max-height: 150px;overflow-y: auto;position: absolute;width: 100%;
        display: none;z-index:2;
    }
    .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()