[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>
