<!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. php ajax登录注册

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本 ...

  2. 1023 C. Bracket Subsequence

    传送门 [http://codeforces.com/contest/1023/problem/C] 题意 n字符串长度,k要求的字符串的长度,字符串只包含'('和')',而且这两种的数量相等,要求的 ...

  3. Final 个人最终作业。

    1.对软件工程M1/M2做一个总结 在M1阶段,我在C705组.M1阶段我与黄漠源同学结对,一起完成提取关键词算法的优化.最初我们一起测试提取关键词算法功能的实现效果,随后我主要负责从网络上搜寻并整理 ...

  4. Mooc总结——Linux内核分析

    朱荟潼+ 原创作品转载请注明出处 :<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 学习笔记链接汇总 第 ...

  5. 语音笔记：MFCC

    一,传统语音识别体系结构 二,MFCC特征提取 MFCC(Mel-frequency cepstral coefficients):梅尔频率倒谱系数.梅尔频率是基于人耳听觉特性提出来的, 它与Hz频率 ...

  6. C#JSON与XML转换

    C#JSON转XML 输入:[{\'name\': \'yancy\',\'value\': \'0\'},{\'name\': \'jieny\',\'value\': \'1\'}] string ...

  7. Machine Learning Based Proactive Flow Entry Deletion for OpenFlow

    来源:IEEE 2018 作者:Hemin Yang and George F.Riley 摘要: 流表容量有限,因此高效管理流表至关重要.本文重点讨论了OpenFlow中定义的一种流表管理机制,即能 ...

  8. shell脚本--文件测试

    文件测试是指测试某一个文件或者目录是否存在 测试文件格式[ 操作符 目录或者文件 ]    注意左括号和操作符之间有一个空格,文件或者目录 与右边的括号之间也有一个空格. -d 测试是否为目录 -e ...

  9. CentOS查看版本及架构信息

    https://blog.csdn.net/shuaigexiaobo/article/details/78030008

  10. JavaScript（ECMAScript） with 语句

    有同事,爱尝鲜,JavaScript ECMAScript with 语句,找了半天不知道局部变量的出处,原来是with语句搞得鬼. http://www.w3school.com.cn/js/pro ...