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