<!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. 作业20171116 beta2及beta发布 成绩

    申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月13日 17:00. 成绩 scrum01 scrum02 scrum03 scrum04 scrum05 sc ...

  2. 20135337——linux第四次实践：字符集总结与分析

    ASCII & GB2312 & UTF-8 ASCII 主要用于显示现代英语和其他西欧语言.它是现今最通用的单字节编码系统,并等同于国际标准ISO 646: 7位(bits)表示一个 ...

  3. 第三个Sprint ------第四天

    出题代码 package com.app.senior_calculator; import java.io.Serializable; public class Question implement ...

  4. IP工具类

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.servlet.http.HttpServletReques ...

  5. PAT 1011 A+B和C

    https://pintia.cn/problem-sets/994805260223102976/problems/994805312417021952 给定区间[-2^31^, 2^31^]内的3 ...

  6. Kitematic when login show Error:Tunning socket could not be established

    https://cn.bing.com/search?q=tunning+socket+could+not+be+established&qs=n&form=QBRE&sp=- ...

  7. Maven 3.3全局配置

    Maven采用全局配置的方案: <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to ...

  8. Ubuntu设置静态IP的方法

    通过修改配置文件/etc/network/interfaces,如果/etc/resolv.conf中提示nameserver会被resolvconf修改,是临时文件,那么dns server也可以在 ...

  9. Docker(十四)-Docker四种网络模式

    Docker 安装时会自动在 host 上创建三个网络,我们可用 docker network ls 命令查看: none模式,使用--net=none指定,该模式关闭了容器的网络功能. host模式 ...

  10. poj 1904(强连通分量+输入输出外挂)

    题目链接:http://poj.org/problem?id=1904 题意:有n个王子,每个王子都有k个喜欢的妹子,每个王子只能和喜欢的妹子结婚,大臣给出一个匹配表,每个王子都和一个妹子结婚,但是国 ...