checkBox全选全不选及数据提交后台

 

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

 

posted @ 2017-08-08 16:27  戈博折刀  阅读(659)  评论(0)    收藏  举报