基于先前写的div checkbox
现在接着写个在弹出的div上展示checkbox
//点击弹出超链的JS,需要导入 jquery.js ,URL 中的action 是struts2的
$(document).ready(function() { $("#start").click(function() { $("#ceng").css("display","block"); $("#close").css("display","block"); $("#container").html("");//清空原来的内容 $.ajax({ type: "POST", dataType: "script",//执行响应请求后的JS url: "insertCheckBox.action" }); return false; }); });
//HTML页面展示的内容 下面的HTML是网上整理的
<table>
<a href="#" id="start" >点击弹出</a><div id="ceng"
style="position:absolute;z-index:2;left:0;top:0;right:0;filter:alpha(Opacity=0);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;">
</div>
<div id="close"
style="position:absolute !important;left:30%;top:0px;z-index:3;border:1px solid #ff6600;background-color:#fff;margin:100px auto;padding:0px;display:none;width:400px;height:300px;text-align:right">
<a href="#" οnclick="document.getElementById('ceng').style.display='none';document.getElementById('close').style.display='none';return false;">关闭</a>
<div style="text-align:center;" id="container"> </div>
</div>
</table>
//基本原理就是 先让 2个层都 不显示,然后 都显示出来 , 在把内容填充到 container div 中
//下面是ajax请求后 ,调用执行的jsp页面
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> var ft=[]; ft['2']='硬件工程师'; ft['3']='计算机硬件1'; ft['4']='高级硬件工程师1'; ft['5']='硬件工程师1'; ft['6']='计算机硬件2'; ft['7']='高级硬件工程师2'; ft['0']='计算机硬件'; ft['1']='高级硬件工程师'; var contain = document.getElementById("container"); var checkBox1= Object; //遍历数组 for(key in ft) { checkBox1 = document.createElement("input"); checkBox1.type= "checkbox"; checkBox1.name = key; checkBox1.id = "abc"; checkBox1.value =key; var label_ = document.createElement("span"); label_.id="spanF"; label_.innerHTML= ft[key]; contain.appendChild(checkBox1 ); contain.appendChild(label_); }