zoukankan      html  css  js  c++  java
  • 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> 
  • 相关阅读:
    linux centos 常用命令(需掌握)
    centos轻松搭建NFS
    Centos6.1在yum安装软件的时候,居然报错了,如何解决
    安装好Centos后,需要做的几件事情。
    使用scp命令传输文件
    批量删除文件或者批量修改文件
    Centos7搭建常用的LNMP架构
    python实现自动抠名字签名,比PS还快
    inotify软件实现实时同步,ssh-key 秘钥连接方式,saltstack实战批量管理Linux,expect批量分发秘钥
    Cisco 路由器配置OSPF 动态路由 (开放式最短路径优先)
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6775441.html
Copyright © 2011-2022 走看看