<!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. 记录SSM框架项目迁移SpringBoot框架-----pom.xml的迁移

    第一步:迁移pom.xml文件(去除spring相关的依赖) SSM中的pom: <project xmlns="http://maven.apache.org/POM/4.0.0&q ...

  2. Java多线程之sleep方法阻塞线程-模拟时钟

    package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...

  3. css last

  4. xml模块 增删改查

    import xml.etree.ElementTree as ET tree = ET.parse("xml test") #open root = tree.getroot() ...

  5. 洛谷 P1160 队列安排

    题目描述 一个学校里老师要将班上 NNN 个同学排成一列,同学被编号为 $1-N$ ,他采取如下的方法: 先将 111 号同学安排进队列,这时队列中只有他一个人: 2−N2-N2−N 号同学依次入列, ...

  6. HTTP协议【详解】——经典面试题

    http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...

  7. JVM是如何处理异常的

    JVM处理异常 异常处理的两大组成要素是抛出异常和捕获异常.这两大要素共同实现程序控制流的非正常转移. 抛出异常可分为显式和隐式两种.显式抛异常的主体是应用程序,指的是在程序中使用throw关键字,手 ...

  8. 洛谷3704 [SDOI2017] 数字表格 【莫比乌斯反演】

    题目分析: 比较有意思,但是套路的数学题. 题目要求$ \prod_{i=1}^{n} \prod_{j=1}^{m}Fib(gcd(i,j)) $. 注意到$ gcd(i,j) $有大量重复,采用莫 ...

  9. 安卓Android基础—第二天

    测试的相关概念 好的软件不是开发出来的,是不断测试出回来的 根据是否知道源代码 黑盒测试 白盒测试 根据测试的粒度 方法测试 单元测试 集成测试 系统测试 根据测试的暴力程度 压力测试(谷歌工程师提供 ...

  10. SPHINX 文档写作工具安装简要指南 - windows 版 - 基于python

    此教程基于本地己安装好 PYTHON 并配置过全局变量:一定具备相应的基础再操作: 上传图片以免产生误导,以下为文字描述,按下列操作即可: 下载 get-pip.py脚本; python get-pi ...