<!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. python易混易乱(1)

    字典 基础操作 <1>keys my_dict = {"name":"zhangsan","age":18} res = my_ ...

  2. css last

  3. ADO.NET工具类（三）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  4. github-share报错无法读取远程仓库

    报错:github Could not read from remote repository 1.github创建仓库成功,而push报告此错误 2.考虑远程仓库名与本地项目名/文件夹名不匹配 3. ...

  5. Linux各目录及每个目录的详细介绍

    http://www.cnblogs.com/duanji/p/yueding2.html

  6. ceil以及double的精度问题

    Codeforces Round #518 (Div. 2) A CF一道水题,总过不去 后面看了一下数据发现是精度出问题了 1000000000000000000 1 1 1000000000000 ...

  7. LOJ2269 [SDOI2017] 切树游戏 【FWT】【动态DP】【树链剖分】【线段树】

    题目分析: 好题.本来是一道好的非套路题,但是不凑巧的是当年有一位国家集训队员正好介绍了这个算法. 首先考虑静态的情况.这个的DP方程非常容易写出来. 接着可以注意到对于异或结果的计数可以看成一个FW ...

  8. 洛谷P1123取数游戏题解

    题目 这是一道简单的搜索题,考查的还是比较基础的东西,其时搜索有时候并不难写,主要是要想到怎么搜.比如这个题,如果想二维四个方向搜则没有头绪,反之因为搜索是用递归实现的,所以我们可以使用递归的特性,把 ...

  9. HDU2204 Eddy's爱好

    题意:给你一个正整数N,确定在1到N之间有多少个可以表示成M^K(K>1)的数. 解析:一个数N 开K次根后得到M  则小于M的所有数的K次方一定小于N 因为任何一个合数都能分解为素数的乘积 所 ...

  10. 如何让自己定义的memory使用fpga自带的memory资源

    前言 本文解决方法来源: http://quartushelp.altera.com/13.1/mergedProjects/hdl/vlog/vlog_file_dir_ram.htm 如果你自己V ...