ajax动态添加复选框

Posted 2020-09-14 xiaotian_小天

 1  function getLands() {
 2   
 3       $.ajax({
 4         url:"httpserver.do?doPost&userQygs="+$("#userQygs").val(),
 5         type:"POST",
 6         dataType:"text",
 7       
 8         success:function(data){
 9        
10          if(data==null||data==""){
11             
12             alert("目前没有地块可供选择，请先绘制地块！");
13             location.href ="gpadd.do?toArcgis&state=1";
14          }else{
15        
16             var lands=data.split(",");
17          
18            //获得前台的div  
19            var insertDiv = document.getElementById("land");  
20            //定义向前台插入的内容为空  
21            insertDiv.innerhtml = "";  
22            var chkinfo;  
23            var chkDIV;  
24            //var txtinfo;  
25            //解析从服务器获得的数据,循环添加复选框  
26            for (var i = 0; i < lands.length-1; i++) {  
27                //为每一个复选框创建一个DIV  
28                chkDIV = document.createElement("div");  
29                //每一个复选框用input创建，类型为checkBox  
30                chkinfo = document.createElement("input");  
31                chkinfo.name = "landDkbh";  
32                chkinfo.id = "landDkbh";  
33                chkinfo.type = "checkbox";  
34               // chkinfo.onclick = test;  
35                //将每一个chinesename为复选框赋值  
36                chkinfo.value = lands[i];  
37               //将复选框添加到Div中  
38                chkDIV.appendChild(chkinfo);  
39                //为Div设置样式  
40                chkDIV.style.height = "50px";  
41                chkDIV.style.width = "150px";  
42                chkDIV.style.float = "left";  
43                chkDIV.align = "left";  
44                chkDIV.appendChild(document.createTextNode(lands[i]));  
45                //将创建的div添加到前台预留的DIV下  
46                insertDiv.appendChild(chkDIV);          
47            }  
48            }
49         }
50     });
51  
52  }

添加复选框的位置

 1  <div class="col-sm-5">
 2             <div class="form-group">
 3                 <label class="col-sm-3 control-label">选择地块</label>
 4                 <div class="col-sm-9"  >                   
 5                  
 6                   <div  id="land" >
 7                   
 8                   </div>
 9             
10                 </div>
11             </div>
12         </div>