[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>
原文地址:https://www.cnblogs.com/x-you/p/8562613.html