<!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-列表-9

    列表: Why: 我们现在已经学过的数据类型有:数字,布尔值,字符串,大家都知道数字主要用于计算,bool值主要是条件判断,只有字符串可以用于数据的存储,这些数据类型够用么?对于一门语言来说,肯定是不 ...

  2. js方法中拼接html时点击事件中拼接字符串参数

    1,代码 var html = '<a href="#" onclick="tableDelete(\''+ row.labelid +'\')"> ...

  3. sixsix团队“餐站”应用代码规范及开发文档

    网络爬虫文档 以下是我们软工小组关于网络爬虫部分代码的的说明文档.至于一些分功能的小函数或方法就不在此赘述,一看就能明白.下面就主要的函数进行说明. 从总体上来说主要有三部分:店家信息爬取部分,菜品信 ...

  4. Linux内核分析——ELF文件格式分析

    ELF文件(目标文件)格式主要三种: 1)可重定向文件:文件保存着代码和适当的数据,用来和其他的目标文件一起来创建一个可执行文件或者是一个共享目标文件.(目标文件或者静态库文件,即linux通常后缀为 ...

  5. layui使用记录

    一.layui表格渲染 如果后台返回的实力类里面包含另一个实体类,那么需要使用如下方式取出相应的值 var tableResult = table.render({ elem: '#' + Serve ...

  6. 小学生四则运算App实验成果

    组名:会飞的小鸟 组员:徐侃 陈志棚  罗伟业 刘芮熔 —成员分工: —①刘芮熔:设置安卓包.界面的代码,界面的排序. —②陈志棚:加减乘除的判断异常处理,例如除数不能为零的异常处理等问题. —③徐侃 ...

  7. 探索guava(一)——前置条件Preconditions类

    作用 可以简洁的完成参数检验,在进行业务逻辑代码前进行前置判断.并且避免了冗长的if语句.guava将所有检验的API都放置于Preconditions类中. API Preconditions类大致 ...

  8. 转【c语言】两个堆栈组成一个队列

    假设有两个堆栈,分别是s1,s2,现在有数列“1,2,3,4,5”,要让这个数列实现先进先出的功能,也就是用两个堆栈组成一个队列,如何实现? 分析: 先将数列压入栈s1,数列在栈中由顶到底的元素为“5 ...

  9. PAT L2-021 点赞狂魔

    https://pintia.cn/problem-sets/994805046380707840/problems/994805058485469184 微博上有个“点赞”功能,你可以为你喜欢的博文 ...

  10. Activiti Rest API tutorial

    http://192.168.66.182:8080/activiti-rest/service/repository/deployments/ {"data":[{"i ...