1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 </head> 8 <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 9 10 <body> 11 <div id="d1"> 12 <input type="checkbox" id="checkAll" onclick="checkAll()"/>全选 13 <hr /> 14 </div> 15 <div id="d2"> 16 <input type="checkbox" class="subCheck" onchange="cancel(this)" value="1"/> 选项1 17 <br /> 18 <input type="checkbox" class="subCheck" onchange="cancel(this)" value="2"/> 选项2 19 <br /> 20 <input type="checkbox" class="subCheck" onchange="cancel(this)" value="3"/> 选项3 21 </div> 22 23 <div id="d3"> 24 <input type="button" value="确定" onclick="mySubmit()"/> 25 26 </div> 27 <hr /> 28 <!-- 下面是用纯动态方式生成标签 --> 29 <div id="d4"> 30 生成a标签 31 </div> 32 33 <div id="d5"> 34 <input type="button" value="生成a标签" id="btn2"/> 35 36 </div> 37 </body> 38 <script> 39 $(function(){ 40 $('#btn2').bind('click', function(event) { 41 /* 在添加标签的同时给添加的标签绑定点击事件 */ 42 $("<li>Hello</li>").appendTo("#d4").bind('click', function(event) { 43 /* 显示标签的内容 */ 44 console.log($(this).text()); 45 }); 46 }); 47 48 49 }) 50 51 function checkAll(){ ///实现全选和全不选功能 52 var allchecked = $("#checkAll")[0].checked; 53 var checkboxs = $(".subCheck"); 54 $.each(checkboxs,function(index,item){ 55 item.checked = allchecked; 56 }) 57 } 58 59 function cancel(){ ///实现取消任意一个子选项选中时，自动去掉全选的选中状态 60 if(!this.checked){ 61 $("#checkAll")[0].checked = false; 62 } 63 } 64 65 ///提交方法 66 function mySubmit(){ 67 //获取所有选中的复选框对象 68 var checkeds = $(".subCheck:checked"); ///从class为subCheck的元素中选择被勾选的 69 // var checkeds = $(".subCheck :checked"); ///注意：这样写是错的，空格代表后代元素， 70 //这句话的意思是从class为subCheck的元素的子元素【准确说，这里是 后代元素】中选择被勾选的，所以结果是错的 71 // var checkeds = $("#d2 :checked"); ///这样写也可以 72 73 if(checkeds.length==0){ 74 alert("请选择复选框！"); 75 return; 76 } 77 var checkedId = ""; 78 for(var i=0;i<checkeds.length;i++){ 79 var id = checkeds[i].value; 80 checkedId+=id+","; 81 } 82 checkedId = checkedId.substring(0,checkedId.length-1);//去掉最后的逗号， 83 var data = ""; 84 data += "&checkedIds="+checkedId; 85 alert("data: "+data); 86 /* 下面可以写 ajax 方法请求后台 87 $.ajax({ 88 url:"", 89 data:data, 90 async:true 91 success:function(response){ 92 93 } 94 });*/ 95 } 96 97 ///动态拼接标签 下面是伪代码仅供思路参考 98 function add(){ 99 //ajax 请求来的list集合中的数据 100 var list = ""; 101 var str = ""; 102 if(list){ //如果list有值不为null啊 undefined啥的 103 for(var i=0;i<list.length;i++){ ///当然，用其他的各种遍历方式也都可以 104 var unit = list[i]; 105 str="<input type='checkbox' class='subCheck' onchange='cancel(this)' value='"+unit.id+"/> 选项3"; 106 $("#d2").append(str); 107 } 108 } 109 } 110 111 </script> 112 113 </html> 114 <!-- 115 注意：如果子选项都是js自动生成的，那么建议在拼接时就像上面那样把onchange方法拼接上去，否则如果用bind方法绑定 116 绑定click事件，有时会无效，原因暂时还不清楚。 117 118 然后发完请求后，springMVC Controler中可以直接用一个字符串 String checkedIds 作为参数接收这个值。 119 然后再用split（“,”）切割再处理即可。 120 121 如果要动态拼接复选框，可以参考上面 add方法 122 -->