<!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. Docker容器学习梳理 - SSH方式登陆容器

    前面几篇已经介绍了Docker基础环境的部署,下面介绍下通过ssh方式登陆Docker容器的操作记录(其实不太建议直接用ssh去连接上容器的想法,虽然可以,但是有很多弊端,而且docker已经提供了容 ...

  2. 牛客训练赛25-A-因数个数

    题目链接https://www.nowcoder.com/acm/contest/158/A 无语...这题很迷啊,原谅我的菜,刚开始想用预处理欧拉筛和前缀和,可是这题太血崩了,这样一样要遍历,1-e ...

  3. Individual Project复审

    复审代码的来源:12061162 王骜 王骜同学的代码注释较多,读起来还是比较容易懂. 代码遵从模块化思想,各个模块之间分工明确,功能重复少,模块之间联系紧密,相互调用明确. 处理单词过程运用了正则表 ...

  4. Linux内核及分析 第一周 计算机是如何工作的？

    C语言代码: int g(int x) { return x + 5; } int f(int x) { return g(x); } int main(void) { return f(5) + 1 ...

  5. 《Linux内核分析》实践4

    <Linux内核分析> 实践四--ELF文件格式分析 20135211李行之 一.概述 1.ELF全称Executable and Linkable Format,可执行连接格式,ELF格 ...

  6. 通过LVM给Linux扩容

    主要参考以下两篇文章: 1:https://www.cnblogs.com/sixiweb/p/3360008.html 2:https://wenku.baidu.com/view/42deee1a ...

  7. PRML读书笔记_绪论

    一.基本名词 泛化(generalization) 训练集所训练的模型对新数据的适用程度. 监督学习(supervised learning) 训练数据的样本包含输入向量以及对应的目标向量. 分类( ...

  8. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  9. FICO模块

  10. 软件工程_7th weeks

    内聚和耦合(学习笔记) 一.内聚 内聚是一个模块内部各成分之间相关联程度的度量.把内聚按紧密程度从低到高排列次序为: 1.偶然内聚:指一个模块内各成分为完成一组功能而组合在一起,它们相互之间即使有关系 ...