<!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>

             <input type="button" value="加载表格体"  onclick="showTbody()"/>

         </div>

         <hr />

         <!--///----------------------只要符合下面这个结构就可以用公共方法------------------------>

         <table>

             <thead>

                 <tr>

                     <td><input type="checkbox" class="allCheck"</td>

                     <td>全选</td>

                 </tr>

             </thead>

             <hr />

             <tbody id="tbody1">

                 <!--<tr>

                     <td><input type="checkbox" /></td>

                     <td>子复选框1</td>

                 </tr>-->

             </tbody>

         </table>

         <!--///---------------------------------------------------------------------------------->

         <hr />

         <div >

             <input type="button" value="提交" onclick="mySubmit()"/>

         </div>

     </body>

     <script>

         $(function(){

             $(".allCheck").live("click",checkAll); //给全选按钮绑定全选事件

 //            $(".allCheck").bind("click",checkAll);

             /*

              1.这里因为thead标签是写好的，所以也可以用bind，如果thead标签中的全选按钮也是动态加载的话

                  就必须用live方法，或者像生成td那样在生成的同时就马上bind绑定，否则会无效。

              2.如果是通用的给类选择器加的方法，还是尽量用live好。

                  比如  ： 这个可以是所有全选复选框的公共方法，只要给每个全选复选框 加上 class="allCheck"即可

                  这样就不用给每个全选框都绑定一遍这个方法

              3.当然也可以给每一个子复选框都加个 class="childCheckBox",然后写个公共的：

                  $(".childCheckBox").live("click",cancelCheckAll);

                  即打开代码中的  带有 “///子复选框方案2************* ” 的行

              */

 //            $(".childCheckBox").live("click",cancelCheckAll);   ///子复选框方案2*************

         });

         ///加载表格体方法

         function showTbody(){

             var obj = $("#tbody1");

             var list = [{id:1,name:"1号子复选框"},{id:2,name:"2号子复选框"}];

             //开始拼接tbody

             $.each(list, function(i,v) {

                 var tr = $("<tr>").appendTo(obj);

                 //子复选框

                 $("<td>").append($("<input>",{type:'checkbox',value:v.id}).bind("click",cancelCheckAll)).appendTo(tr);  ///子复选框方案1

 //                $("<td>").append($("<input>",{type:'checkbox',value:v.id,class:'childCheckBox'})).appendTo(tr); ///子复选框方案2*************

                 //显示名称

                 $("<td>",{

                     text:v.name

                 }).appendTo(tr);

             });

         }

         ///-------------------------公共的全选和非全选方法-----------------------------

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

             var allchecked  = this.checked;

             var checks = $(this).closest("table").children("tbody").find(":checkbox");

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

                 item.checked = allchecked;

             })

         }

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

             var allCheck = $(this).closest("table").children("thead").find(":checkbox").eq(0);

             if(!this.checked){

                 allCheck[0].checked=false;

             }

         }

         /*

         这两个方法可以是多处   有全选功能的复选框   的公共方法，只要目标表格的结构符合 table > thead > tbody  结构，就可以调用上面的两个方法

         */

         ///------------------------------------------------------

         ///提交方法

         function mySubmit(){

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

             var checkeds = $("#tbody1 :checkbox:checked");  ///tbody下的复选框中选中的

             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){

                 }

             });*/

         }

     </script>

 </html>

表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果的更多相关文章

  1. Web版需求征集系统所得1，servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  4. C# dev gridcontrol中添加checkbox复选框

    文章来源 csdn weinierbian http://blog.csdn.net/weinierbian/article/details/6255402 添加一列,FieldName为 " ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. easyui复选框树动态加载后台数据，实现自动选中数据库中数据。后台语言是.NET

    最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...

  7. checkbox 多选框 ：jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 如何在Android的ListView中构建CheckBox和RadioButton列表(支持单选和多选的投票项目示例)

    引言 我们在android的APP开发中有时候会碰到提供一个选项列表供用户选择的需求,如在投票类型的项目中,我们提供一些主题给用户选择,每个主题有若干选项,用户对这些主题的选项进行选择,然后提交. 本 ...

  9. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

随机推荐

  1. 将WCF寄宿在托管的Windows服务中

    在我之前的一篇博客中我介绍了如何发布WCF服务并将该服务寄宿于IIS上,今天我再来介绍一种方式,就是将WCF服务寄宿在Windows服务中,这样做有什么好处呢?当然可以省去部署IIS等一系列的问题,能 ...

  2. Java使用RabbitMQ之公平分发

    发送消息: package org.study.workfair; import com.rabbitmq.client.Channel; import com.rabbitmq.client.Con ...

  3. Deconvolution用法

  4. 搭建Hexo博客（四）－设置

    1.主题 比较流行的是yilia,下载主题到theme目录即可.再根据说明文档进行设置. 2.图片发布 source下创建的目录,并且目录下有文件,则文件会被生成到post目录中.图片可以放在这里.既 ...

  5. JarvisOJ Misc 炫酷的战队logo

    欣赏过了实验室logo,有人觉得我们战队logo直接盗图比较丑,于是我就重新设计了一个,大家再欣赏下? 一开始拿到的BMP文件就打不开,用010打开发现文件头被抹去了,补上了BMP,与文件大小后,发现 ...

  6. Linux成为云计算平台的主流操作系统

    导读 这是一个人人谈"云"."大数据"的时代,作为一个IT民工,如果与同行间聊天时,不谈及这方面的内容,有人可能会觉得你落伍了,跟不上这个时代了. 这是一个人人 ...

  7. json-lib和dom4j实现JSON转XML

    package com.geostar.gfstack.operationcenter.test; import net.sf.json.JSONObject; import net.sf.json. ...

  8. MyBatis实操进阶版(一)

    MyBatis实操进阶版(一) 目前而言,持久层框架中,在业务实现灵活性上,无可出MyBatis之右者.具体原因,后续将逐步展开 ResultMap元素的设置 配置文件中,ResultMap元素的作用 ...

  9. JavaEE进阶集锦(持续更新中)

    1.影响Servlet生命周期的注解:@PostConstruct和@PreDestroy @PostConstruct:被修饰的方法会在服务器加载Servlet的时候运行,并且只会被服务器调用一次, ...

  10. LEGB规则

    链接:https://www.cnblogs.com/GuoYaxiang/p/6405814.html 命名空间 大约来说,命名空间就是一个容器,其中包含的是映射到不同对象的名称.你可能已经听说过了 ...