素材牛

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

 所属分类:网页特效-弹出层,输入/选择框

 浏览:191次-  下载:1次-  评论:0次-  发布时间:2018-12-01
jQuery简单实用的弹出式复选框选项多选效果代码兼容IE6
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:jQuery弹出式复选框选项多选代码、checkbox复选框选择代码,点击弹出小窗口列出选项列表进行选择,确定后点击“重新选择”还可以进行修改。

详细介绍

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(""));
}

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证