ajax动态添加复选框
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 /* for(var i=0;i<data.length;i++){ 51 52 $("#land").append("<tr> <td> <input type='checkbox' name='landDkbh' id='landDkbh' value="+data[i].landDkbh+" /></td> <td>"+data[i].landName+"</td><td>"+data[i].landScmj+"</td> <th><a href='javascript:void(0)' onclick=\"look('"+data[i].landDkbh+"')\" >查看</a></th></tr>"); 53 54 } */ 55 56 57 } 58 } 59 }); 60 61 } 62 63
添加复选框的位置
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>
