JQuery实现动态加载复选框

效果如图,通过ajax接收的数据,动态生成想要的日期

在网上查找一番后,参考别人的代码,记录下来,方便以后查阅

引入的js包

jquery.easyui.min.js

jquery.min.js

(一)在body总添加div标签

<div id="allTime"></div>

 (二)js代码

function show(){
		var row = $('#tb').datagrid('getSelected');//获取选中行
		if (!row) {
			$.messager.alert("提示", "请选择您想要查看的仪器!");
			return;
		}
		
		$('#showTime').form('clear');
		$('#instrumentNameShow').textbox('setValue', row.id).textbox("setText", row.name).textbox('textbox').attr('readonly',true);
		//用ajax获取数据并自动生成复选框
		$.ajax({
			type : 'POST',
			url : '${pageContext.request.contextPath}/serviceTime/selectAllTime.action',
			data : {id:row.id},
			success : function(map) {
				$("#allTime").empty();
				var list = map.rows;
				for(var i = 0; i < list.length;i++){
					var number = list[i].time;
					var day = "";
					if(number == 11) day = "星期一上午"
					else if(number == 12) day = "星期一下午"
					else if(number == 21) day = "星期二上午"
					else if(number == 22) day = "星期二下午"
				    else if(number == 31) day = "星期三上午"
				    else if(number == 32) day = "星期三下午"
					else if(number == 41) day = "星期四上午"
					else if(number == 42) day = "星期四下午"
				    else if(number == 51) day = "星期五上午"
				    else if(number == 52) day = "星期五下午"
				    else if(number == 61) day = "星期六上午"
					else if(number == 62) day = "星期六下午"
					else if(number == 71) day = "星期日上午"
				    else if(number == 72) day = "星期日下午"
					$("#allTime").append(
		                "<label>"+
		                    "<input id='time' name='time' type='checkbox' value='"+number+"' >" 
		                    + day
		                 +"</label>");
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				$.messager.alert("错误提示", "失败!" + textStatus);
			}
		});
		
		$('#showTime').dialog('open').dialog('center');
	}

我是直接copy所写项目中方法,没有截取,主要的代码就是ajax中的内容,从后台获取数据之后,通过循环,写出复选框

               for(var i = 0; i < list.length;i++){
					var number = list[i].time;
					var day = "";
					if(number == 11) day = "星期一上午"
					else if(number == 12) day = "星期一下午"
					else if(number == 21) day = "星期二上午"
					$("#allTime").append(
		                "<label>"+
		                    "<input id='time' name='time' type='checkbox' 
                             value='"+number+"' >" 
		                    + day
		                 +"</label>");
				}

猜你喜欢

转载自blog.csdn.net/qq_40312160/article/details/82417353