zoukankan      html  css  js  c++  java
  • [Ajax] 如何使用Ajax传递多个复选框的值

    HTML+JavaScript代码:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>选择复选框</title>
     7         
     8         <!--导入jQuery包-->
     9         <script type="text/javascript" src="js/jquery-1.6.js" ></script>
    10     </head>
    11 
    12     <body>
    13         <!--
    14             保持同样的name属性,
    15             value属性仍然可以使用 <%#Eval("id")%> 
    16             这里直接写上作为例子
    17         -->
    18         <input type="checkbox" name="checkbox1" runat="server" value="1001" />1001<br />
    19         <input type="checkbox" name="checkbox1" runat="server" value="1002" />1002<br />
    20         <input type="checkbox" name="checkbox1" runat="server" value="1003" />1003<br />
    21         <input type="checkbox" name="checkbox1" runat="server" value="1004" />1004<br />
    22         
    23         <!--删除按钮,显示选择的复选框的value属性值-->
    24         <button id="btndelete">删除</button>
    25         
    26         <br />
    27             后台使用ASP:
    28             
    29             <pre>
    30             //获取String类型的,用逗号分隔
    31             String str=Page.Request["deleteId"];
    32             
    33             //截取为数组
    34             String[] delIds=str.split(',');
    35             
    36             //转换为int,数组长度一致
    37             int[] newDelIds=new int[delIds.length];
    38             
    39             for(int i=0;i<delIds.length;i++){
    40                 //执行强转
    41                 newDelIds[i]=Integer.parseInt(delIds[i]);
    42             }
    43             </pre>
    44             
    45         
    46     </body>
    47     <script>
    48         //所有的复选框控件,通过名字属性获取
    49         var checkboxObjs = document.getElementsByName("checkbox1");
    50 
    51 
    52         //删除按钮绑定事件
    53         $("#btndelete").click(function() {
    54             //定义存储value的数组,初始为空
    55             var delVals = [];
    56             
    57             //找出选中复选框的值
    58             for(var i = 0; i < checkboxObjs.length; i++) {
    59                 var checkboxObj = checkboxObjs[i]; //遍历的复选框元素
    60                 //判断是否有选中
    61                 if(checkboxObj.checked) {
    62                     //选中的value值添加到数组中
    63                     delVals.push(checkboxObj.value);
    64                 }
    65             }
    66             //for循环结束,先打印获取的value是否正确。
    67 //            alert(delVals);
    68             
    69             //判空
    70             if(delVals.length<=0){
    71                 alert("请选择");
    72             }else{
    73                 //执行Ajax提交
    74                 $.ajax({
    75                     url:"",
    76                     type:"POST",
    77                     traditional: true,//阻止深度序列化,必写
    78                     data:{
    79                         //删除的value数组
    80                         "deleteId":delVals
    81                     },
    82                     success:function(data){
    83                         //回调函数    
    84                     }
    85                 });
    86             }
    87         });
    88     </script>
    89     
    90 
    91 </html>
  • 相关阅读:
    访问修饰符的权限。
    字符编码
    3/11 作业
    3/10 作业
    作业 3/9
    流程控制之for循环
    Exception in createBlockOutputStream
    windows上传文件到 linux的hdfs
    win10 配置 hadoop-2.7.2
    hadoop 源码编译
  • 原文地址:https://www.cnblogs.com/x-you/p/8562613.html
Copyright © 2011-2022 走看看