简单的 div checkbox 2

基于先前写的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="#" onclick="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_);   
    }