<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>

     <body>

         <div id="d1">

             <input type="checkbox" id="checkAll" onclick="checkAll()"/>全选

             <hr />

         </div>

         <div id="d2">

             <input type="checkbox"  class="subCheck" onchange="cancel(this)" value="1"/> 选项1

             <br />

             <input type="checkbox"  class="subCheck" onchange="cancel(this)" value="2"/> 选项2

             <br />

             <input type="checkbox"  class="subCheck" onchange="cancel(this)" value="3"/> 选项3

         </div>

         <div id="d3">

             <input type="button" value="确定" onclick="mySubmit()"/>

         </div>

         <hr />

         <!-- 下面是用纯动态方式生成标签 -->

         <div id="d4">

             生成a标签

         </div>

         <div id="d5">

             <input type="button" value="生成a标签" id="btn2"/>

         </div>

     </body>

     <script>

         $(function(){

             $('#btn2').bind('click', function(event) {

                 /* 在添加标签的同时给添加的标签绑定点击事件 */

                 $("<li>Hello</li>").appendTo("#d4").bind('click', function(event) {

                   /* 显示标签的内容 */

                   console.log($(this).text());

                 });

               });

         })

         function checkAll(){ ///实现全选和全不选功能

             var allchecked  = $("#checkAll")[0].checked;

             var checkboxs = $(".subCheck");

             $.each(checkboxs,function(index,item){

                 item.checked = allchecked;

             })

         }

         function cancel(){ ///实现取消任意一个子选项选中时，自动去掉全选的选中状态

             if(!this.checked){

                 $("#checkAll")[0].checked = false;

             }

         }

         ///提交方法

         function mySubmit(){

             //获取所有选中的复选框对象

             var checkeds = $(".subCheck:checked");  ///从class为subCheck的元素中选择被勾选的

 //            var checkeds = $(".subCheck :checked");  ///注意：这样写是错的，空格代表后代元素，

 //这句话的意思是从class为subCheck的元素的子元素【准确说，这里是 后代元素】中选择被勾选的，所以结果是错的

 //            var checkeds = $("#d2 :checked"); ///这样写也可以

             if(checkeds.length==0){

                 alert("请选择复选框！");

                 return;

             }

             var checkedId = "";

             for(var i=0;i<checkeds.length;i++){

                 var id = checkeds[i].value;

                 checkedId+=id+",";

             }

             checkedId = checkedId.substring(0,checkedId.length-1);//去掉最后的逗号，

             var  data = "";

             data += "&checkedIds="+checkedId;

             alert("data: "+data);

             /*  下面可以写 ajax 方法请求后台

              $.ajax({

                 url:"",

                 data:data,

                 async:true

                 success:function(response){

                 }

             });*/

         }

         ///动态拼接标签  下面是伪代码仅供思路参考

         function add(){

             //ajax 请求来的list集合中的数据

             var list = "";

             var str = "";

             if(list){  //如果list有值不为null啊 undefined啥的

                 for(var i=0;i<list.length;i++){  ///当然，用其他的各种遍历方式也都可以

                     var unit = list[i];

                     str="<input type='checkbox'  class='subCheck' onchange='cancel(this)' value='"+unit.id+"/> 选项3";

                     $("#d2").append(str);

                 }

             }

         }

     </script>

 </html>

 <!--

     注意：如果子选项都是js自动生成的，那么建议在拼接时就像上面那样把onchange方法拼接上去，否则如果用bind方法绑定

     绑定click事件，有时会无效，原因暂时还不清楚。

     然后发完请求后，springMVC Controler中可以直接用一个字符串 String checkedIds 作为参数接收这个值。

     然后再用split（“,”）切割再处理即可。

     如果要动态拼接复选框，可以参考上面 add方法

 -->

checkBox全选全不选及数据提交后台的更多相关文章

  1. jdbc工具类的封装，以及表单验证数据提交后台

    在之前已经写过了jdbc的工具类,不过最近学习了新的方法,所以在这里重新写一遍,为后面的javaEE做铺垫: 首先我们要了解javaEE项目中,文件构成,新建一个javaEE项目,在项目中,有一个we ...

  2. Android 带checkbox的listView 实现多选，全选，反选

    由于listview的一些特性,刚开始写这种需求的功能的时候都会碰到一些问题,重点就是存储每个checkbox的状态值,在这里分享出了完美解决方法:     布局文件: [html]   <?x ...

  3. 【转】Android 带checkbox的listView 实现多选，全选，反选 -- 不错

    原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...

  4. 【转】Android 带checkbox的listView 实现多选，全选，反选----解决checkbox错位问题

    原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...

  5. 2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

    字符串的另一种写法:<<<AAAA; 后两个AA回车要求顶格  不然报错 例子: <!DOCTYPE html> <html lang="en" ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. checkbox实现全选全不选

    1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...

  8. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  9. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

随机推荐

  1. Python下操作Memcache/Redis/RabbitMQ说明

    一.MemcacheMemcache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访 ...

  2. beta阶段测试基本概况对应机型硬件信息

    机型测试概况 测试结果 测试终端数 品牌分布分析 系统分布分析 分辨率分布 未执行 1 联想 4.0.3 480*800 安装失败 1 联想 4.2.1 480*854 通过 119 华为, 三星, ...

  3. HTTP基础与Android之（安卓与服务器通信）——使用HttpClient和HttpURLConnection

    查看原文:http://blog.csdn.net/sinat_29912455/article/details/51122286 1客户端连接服务器实现内部的原理 GET方式和POST方式的差别 H ...

  4. 《面向对象程序设计》c++第五次作业___calculator plus plus

    c++第五次作业 Calculator plusplus 代码传送门 PS:这次作业仍然orz感谢一位同学与一位学长的windows帮助,同时再次吐槽作业对Mac系统用户的不友好.(没朋友千万别用Ma ...

  5. Practice5.1 测试与封装5.1

    结对同伴: 姓名 学号 博客地址 叶子鹏 201306114420 http://www.cnblogs.com/kazehanaai/ 王佳宁 201306114434 http://www.cnb ...

  6. BUG管理工具——Mantis安装配置

    配置环境: CentOS6.5(所有操作在root用户下面操作) 1. 关闭防火墙, service iptables stop(防止防火墙捣乱,或者还得手动添加端口号的麻烦) 2. Disable ...

  7. pandas创建一个日期

    1.通过指定周期和频率,使用date.range()函数就可以创建日期序列. 默认情况下,范围的频率是天. 2.bdate_range()用来表示商业日期范围,不同于date_range(),它不包括 ...

  8. scipy优化器optimizer

    #optimazer优化器 from scipy.optimize import minimize def rosem(x): return sum(100.0*(x[1:]-x[:-1])**2.0 ...

  9. SpringBoot(十五)_springboot实现预览pdf

    最近,项目上要做个打印的东西,还要预览.我想就直接生成pdf预览,然后用户选择打印 于是,昨天找了找资料.一般用itext 进行转pdf.于是我就用springboot试了试,代码比较简单,现在只是简 ...

  10. java.util.concuttent Callable Future详解

    在传统的多线程实现方式中(继承Thread和实现Runnable)无法直接获取线程执行的返回结果,如果需要获取执行结果,就必须通过共享变量或者使用线程通信的方式来达到效果,这样使用起来就比较麻烦. 从 ...