<!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. 初识Anrdiod SDK

    概念 SDK:(software development kit)软件开发工具包.被软件开发工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件的开发工具的集合. 因此,Android ...

  2. php new self()

    php里new self() 一般在类内部使用,作用是对自身类实例化 <?php class test{ public function __construct(){        echo ' ...

  3. Eclipse配置C++时的三个关键环境变量

    ECLIPSE下载很简单,然后装上MinGW,安装就完成了,关键是要配置三个环境变量 include——C:\MinGW\include lib——C:\MinGW\lib path——C:\MinG ...

  4. Js返回上一页，刷新页面，定时刷新，改变地址栏 等常用实用技巧

    1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forw ...

  5. CSS边框效果

    前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...

  6. Xtoken

    “我希望有一种模式,利用群体的智慧让最好的想法总能够脱颖而出”. 博弈模型 背景 本文为NEO社区理事会秘书长陶荣祺在全球创业周区块链创新与发展论坛上的主题演讲<Xtoken代观社区驱动群体智慧 ...

  7. SPOJ10707 COT2 - Count on a tree II 【树上莫队】

    题目分析: 考虑欧拉序,这里的欧拉序与ETT欧拉序的定义相同而与倍增LCA不同.然后不妨对于询问$u$与$v$让$dfsin[u] \leq dfsin[v]$,这样对于u和v不在一条路径上,它们可以 ...

  8. 【BZOJ5020】【THUWC2017】在美妙的数学王国中畅游 LCT 泰勒展开

    题目大意 给你一棵树,每个点有一个函数\(f(x)\) 正弦函数 \(\sin(ax+b) (a\in[0,1],b\in[0,\pi],a+b\in[0,\pi])\) 指数函数 \(e^{ax+b ...

  9. 阿里云.log

    申请证书审核失败的原因及处理方法;( 新添加站点 免费版 SSL 网页内不能有 HTTPS的连接:更多点击连接)

  10. 【支付宝】支付 系统繁忙，请稍后再试(ALIN10146)

    https://openclub.alipay.com/read.php?tid=6918&fid=60 我碰到的是这个问题导致 把signType 改为  RSA2   改成