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>
  • 相关阅读:
    light oj 1105 规律
    light oj 1071 dp(吃金币升级版)
    light oj 1084 线性dp
    light oj 1079 01背包
    light oj 1068 数位dp
    light oj 1219 树上贪心
    light oj 1057 状压dp TSP
    light oj 1037 状压dp
    矩阵快速幂3 k*n铺方格
    矩阵快速幂2 3*n铺方格
  • 原文地址:https://www.cnblogs.com/x-you/p/8562613.html
Copyright © 2011-2022 走看看