jQuery简单实用的弹出式复选框选项多选效果代码

HTML部分：

<div class="wrapper"></div>
<div class="layouts" style="display:none">
    <div class="layoutsMain">
        <div class="title"></div>
        <div class="main-wrapper">
            <div class="checkboxwrapper">
            </div>
        </div>
        <div class="btn-wrapper">
            <a href="javascript:;" class="a-btn-01" onclick="sureBtn()">确定</a>
            <a href="javascript:;" class="a-btn-02">取消</a>
        </div>
    </div>
</div>

JS部分：

var arr = [{
    id: 0,
    name: "techang",
    title: "特长",
    data: [{
        value: "001",
        displayVaule: "篮球"
    }, {
        value: "002",
        displayVaule: "足球"
    }, {
        value: "003",
        displayVaule: "排球"
    }, {
        value: "004",
        displayVaule: "唱歌"
    }, {
        value: "005",
        displayVaule: "跳舞"
    }, {
        value: "006",
        displayVaule: "吹笛子"
    }]
}, {
    id: 1,
    name: "aichi",
    title: "爱吃",
    data: [{
        value: "001",
        displayVaule: "红烧肉"
    }, {
        value: "002",
        displayVaule: "腌笃鲜"
    }, {
        value: "003",
        displayVaule: "煎牛排"
    }, {
        value: "004",
        displayVaule: "羊蝎子"
    }, {
        value: "005",
        displayVaule: "酸菜鱼"
    }, {
        value: "006",
        displayVaule: "凉拌金针菇"
    }, {
        value: "007",
        displayVaule: "羊排"
    }, {
        value: "008",
        displayVaule: "番茄鸡蛋"
    }, {
        value: "009",
        displayVaule: "豆汁"
    }]
}, {
    id: 2,
    name: "jingdian",
    title: "景点",
    data: [{
        value: "001",
        displayVaule: "故宫"
    }, {
        value: "002",
        displayVaule: "长城"
    }, {
        value: "003",
        displayVaule: "景山公园"
    }, {
        value: "004",
        displayVaule: "北海公园"
    }, {
        value: "005",
        displayVaule: "颐和园"
    }, {
        value: "006",
        displayVaule: "圆明园"
    }, {
        value: "007",
        displayVaule: "西二旗"
    }, {
        value: "008",
        displayVaule: "南海子公园"
    }, {
        value: "009",
        displayVaule: "陶然提公园"
    }]
}]
var current = 0;
var checkboxWrap = [];
var zhi = []; //选中弹框的值
function setPage() {
    var tempPd = [];
    for (var i = 0; i < arr.length; i++) {
        var _title = arr[i].title;
        var _data = arr[i].data;
        var _name = arr[i].name;
        var liHTML = [];
        zhi[i] = zhi[i] || [];
        for (var j = 0; j < zhi[i].length; j++) {
            liHTML.push('<li class="li-item">' + zhi[i][j] + '</li>')
        }
        tempPd.push('<div class="div-item">' +
            '<span class="label">' + _title + ':</span>' +
            '<ul class="zhi-ul">' + liHTML.join("") +
            '<li class="last"><a href="javascript:;" class="choose" onclick="choose(this,' + i + ')">' + (zhi[i].length > 0 ? '重新选择' : '选择') + '</a></li>' +
            '</ul>' +
            '</div>')
    }
    $('.wrapper').html(tempPd.join(""));
}
setPage();
/**
 * [sureBtn 点击弹框的确定事件]
 * @return {[type]} [description]
 */
function sureBtn() {
    zhi[current] = [];
    var $checked = $('.checkboxwrapper input[type=checkbox]:checked');
    var chsLength = $checked.length;
    for (var i = 0; i < chsLength; i++) {
        zhi[current].push($checked.eq(i).siblings('span').text());
    }
    $('.layouts').hide();
    setPage();
}
//点击取消事件
$('body').on('click', '.a-btn-02', function() {
    $('.layouts').hide();
})
/**
 * [choose 点击选择弹出弹框]
 * @param  {[type]} obj   [点击的 选择元素]
 * @param  {[type]} index [‘选择’在页面类别序列]
 * @return {[type]}       [description]
 */
function choose(obj, index) {
    current = index;
    checkboxWrap = [];
    $('.layouts').show();
    var layoutTitle = $(obj).parents('.div-item').find('.label').text();
    $('.title').text(layoutTitle.substring(0, layoutTitle.length - 1))
    setDialog(index);
}
/**
 * [setDialog 弹框里面的checkbox和页面上的数据匹配  并给checked状态]
 * @param {[type]} index [页面类别序列]
 */
function setDialog(index) {
    zhi[index] = zhi[index] || [];
    var checkboxWrap = [],
        data = arr[index],
        _title = data.title,
        _data = data.data,
        _name = data.name;
    for (var j = 0; j < _data.length; j++) {
        var flag = zhi[index].indexOf(_data[j].displayVaule) > -1; //精华
        checkboxWrap.push('<label><input type="checkbox" ' + (flag ? "checked" : null) + ' name="' + _name + '" value="' + _data[j].value + '"/><span>' + _data[j].displayVaule + '</span></label>')
    }
    $('.checkboxwrapper').html(checkboxWrap.join(""));
}