欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js弹出复选框 选择后将值显示在页面

程序员文章站 2022-07-06 10:20:15
...

js弹出复选框 选择后将值显示在页面js弹出复选框 选择后将值显示在页面
js弹出复选框 选择后将值显示在页面
html

<body>
    <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>
</body>
<script typet="text/javascript" src="jquery-1.9.1.min.js"></script>

js

var arr = [{
        id: 0,
        name: "techang",
        title: "特长",
        data: [{
            id: "001",
            displayVaule: "篮球"
        }, {
            id: "002",
            displayVaule: "足球"
        }, {
            id: "003",
            displayVaule: "排球"
        }, {
            id: "004",
            displayVaule: "唱歌"
        }, {
            id: "007",
            displayVaule: "跳舞"
        }, {
            id: "008",
            displayVaule: "跳舞"
        }, {
            id: "005",
            displayVaule: "跳舞"
        }, {
            id: "006",
            displayVaule: "吹笛子"
        }]
    }, {
        id: 1,
        name: "aichi",
        title: "食物",
        data: [{
            id: "001",
            displayVaule: "红烧肉"
        }, {
            id: "002",
            displayVaule: "腌笃鲜"
        }, {
            id: "003",
            displayVaule: "煎牛排"
        }, {
            id: "004",
            displayVaule: "羊蝎子"
        }, {
            id: "005",
            displayVaule: "酸菜鱼"
        }, {
            id: "006",
            displayVaule: "凉拌金针菇"
        }, {
            id: "007",
            displayVaule: "羊排"
        }, {
            id: "008",
            displayVaule: "番茄鸡蛋"
        }, {
            id: "009",
            displayVaule: "豆汁"
        }]
    } ]
    }]
	var list= new Array();
    var current = 0;
	var zid = 0;
    var checkboxWrap = [];
    var zhi = []; //选中弹框的值
	var zhid = [];
    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] || [];
			zhid[i] = zhid[i] || [];
			//list.splice(0,list.length);//清空数组          
			if(zhi[i][0]=="全选"){
				for (var j = 1; j < zhi[i].length; j++) {
					liHTML.push('<li class="li-item">' + zhi[i][j+1] + '</li>')
					//将值放进data中
					data['vote[' + j +'].studentId'] = zhid[i][j];
					data['vote[' + j +'].studentName'] = zhi[i][j];
				}
			}else{
				for (var j = 0; j < zhi[i].length; j++) {
					liHTML.push('<li class="li-item">' + zhi[i][j] + '</li>')
					//循环将选中的值放进data中
					data['vote[' + j +'].studentId'] = zhid[i][j];
					data['vote[' + j +'].studentName'] = zhi[i][j];
				}
			}
			console.log(list);
            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" οnclick="choose(this,' + i + ')">' + (zhi[i].length > 0 ? '重新选择' : '选择') + '</a></li>' +
                '</ul>' +
                '</div>')
        }
        $('.wrapper').html(tempPd.join(""));
    }
    setPage();
    /**
     * [sureBtn 点击弹框的确定事件]
     * @return {[type]} [description]
     */
    function sureBtn() {
        zhi[current] = [];
		zhid[zid] = [];
        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());
			zhid[zid].push($checked.eq(i).siblings('font').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;
			var shu =0 ;
			checkboxWrap.push('<label style="margin:10px"><input id="sel_1" οnchange="selectAll()" type="checkbox" ><span>全选</span></label><br/>')				
        for (var j = 0; j < _data.length; j++) {
            var flag = zhi[index].indexOf(_data[j].displayVaule) > -1; //精华
            checkboxWrap.push('<label style="margin:10px"><input οnchange="selectAlls()" type="checkbox" ' + (flag ? "checked" : null) + ' name="' + _name + '" value="' + _data[j].id + '"/>'+
			'<font>' + _data[j].id + '</font><span>' + _data[j].displayVaule + '</span></label><br/>')
			if(flag=null){
			shu=shu+1;
			}
		}	
		checkboxWrap.push('<label id="label1"></label>')
		$('.checkboxwrapper').html(checkboxWrap.join(""));
    }
	function selectAll(){
	            var isCheck=$("#sel_1").is(':checked');  //获得全选复选框是否选中
	            $("input[type='checkbox']").each(function() {  
	                this.checked = isCheck;       //循环赋值给每个复选框是否选中
	            });
	        }
	function selectAlls(){
	var len = $("input:checkbox:checked").length;
  		label1.innerHTML=len;
  
	}

连接后端数据时 将var arr = [{}]中的值换成读取java后端

var arr= new Array();
$.ajax({
	url : "/student/vote/queryStudent",
    dataType: 'json',
    type : "post",
    async:false,
    success: function (data) {
  	  //$.toast(data.msg);
  	   arr.push({'data':data.rows});
    }
});
  	// console.log(arr);   	

将多选框选中的值传输给后台

var data = {};
$.ajax({
		   url:"/student/vote/addActivity",
	   		type: 'POST',
	   		dataType : "json",
	   		data: data,
	   		success: function(data) {
	   			if (data.code == '000') {
	   				$.toast("提交成功");
	   				setTimeout(function() {
	   					pback();
	   				}, 1000);
	   			}else {
	   				$.toast(data.msg, "cancel");
	   			}
	   		},
	   		error: function(data) {
	   			alert("系统异常,请联系管理员");
	   		}
	   });
//将勾选的值放进data集合中
data['vote[' + j +'].studentId'] = zhid[i][j];
data['vote[' + j +'].studentName'] = zhi[i][j];	

java
Controoller
@RequestMapping({"addActivity"})
		@ResponseBody
		public Object addActivity(StudentVoteActivity activity> ){			
			activity.setTeacherId(getAppUser().getTeacher().getId());
			studentVoteActivityService.addupdateVoteActivity(activity);				
			return new RspResult(Status.SUCCESS);			
		}
		
modelVo
public class StudentVoteActivity {
	private List<StudentVote> vote;
	public List<StudentVote> getVote() {
		return vote;
	}
	public void setVote(List<StudentVote> vote) {
		this.vote = vote;
	}
}
model
public class StudentVote {
	private Integer id;
	private Integer studentId;
	private Integer studentNumber;
	}

css

* {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px;
            text-decoration: none;
        }
        
        .wrapper {
            padding: 30px;
        }
        
        .label {
            width: 40px;
            float: left;
            color: #999
        }
        
        .zhi-ul {
            width: 500px;
            float: left;
        }
        
        .div-item {
            height: auto;
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .zhi-ul li {
            float: left;
            margin-right: 10px;
            color: #666
        }
        
        .zhi-ul li a {
            color: #20ace8;
        }
        
        .layouts {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, .4)
        }
        
        .layoutsMain {overflow-y: auto;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: #fff;
            border-radius: 5px;
        }
        
        .title {
            height: 39px;
            padding: 0 10px;
            border-bottom: 1px solid #dcdcdc;
            font-size: 14px;
            line-height: 39px;
            color: #333;
        }
        
        .main-wrapper {
            height: 220px;
            overflow-y: auto;
        }
        
        .btn-wrapper {
            text-align: center;
            ;
            height: 39px;
            border-top: 1px solid #dcdcdc;
        }
        
        .btn-wrapper a {
            width: 60px;margin-left
            margin: 0 10px;
            height: 24px;
            border-radius: 5px;
            display: inline-block;
            line-height: 24px;
            margin-top: 7px;
        }
        
        .btn-wrapper a:first-child {
            color: #fff;
            background: #20ace8
        }
        
        .btn-wrapper a:last-child {
            color: #666;
            background: #f1f1f1
        }
        
        .checkboxwrapper {
            padding: 10px;
        }
        
        .checkboxwrapper label {
            width: auto;
            height: auto;
            min-width: 68px;
            display: inline-block;
            cursor: pointer;
            margin-bottom: 5px;
        }
        
        .checkboxwrapper input {
            margin-right: 5px;
        }
		
		input[type="checkbox"]{
            width:20px;
            height:20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            position: relative;
        }
        input[type="checkbox"]::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #d9d9d9;
        }
        input[type="checkbox"]:checked::before{
            content: "\2713";
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            width:100%;
            border: 1px solid #18b4ed;
            color:#18b4ed;
            font-size: 20px;
            font-weight: bold;
        }
相关标签: 功能