`
crabdave
  • 浏览: 1281638 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何对表格中的checkbox,进行全选中、部分选中，全不选中的小组件

OOHTML 
阅读更多

如何对表格中的checkbox,进行全选中、部分选中，全不选中的小组件

以下是源文件（在回显时可以调用cbOnclick(obj)方法）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 如何对表格中的checkbox,进行全选中、部分选中，全不选中的小组件 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
  //部分选择时执行
function cbOnclick(obj){
 var cbAll=obj.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.getElementsByTagName("input")[0];
 if(cbAll.indeterminate==false){
  cbAll.indeterminate=true;
 }
 if(checkCB(obj)==1){
  cbAll.indeterminate=false;
  cbAll.checked=true;
 }else if(checkCB(obj)==2){
  cbAll.indeterminate=false;
  cbAll.checked=false;
 }
}
//校验该文本框里,分三种情况 ：全选、全不选、部分被选中
function checkCB(obj){
 var flag=0;
 var oo=obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("input");
 var k=0;
 if(oo!=null&&oo.length>0){
    for(var i=0;i<oo.length;i++){
       if(oo[i].checked==true){
         k++;
    }
    }
 }
 if(k==oo.length){//全部被选中
    flag=1;
 }else if(k==0){//全不选
    flag=2;
 }else{//部分被选中
    flag=0;
 }
 
 return flag;
}
//全选
function checkAll(obj){
    var cbs=obj.parentNode.nextSibling.getElementsByTagName("input");
 if(cbs!=null&&cbs.length>0){
  for(var i=0;i<cbs.length;i++){
    if(cbs[i].type=='checkbox'){
   if(obj.checked==true){
      cbs[i].checked=true;
   }else{
      cbs[i].checked=false;
   }
    }
  }
 }
} 
 
  </script>
 </HEAD>

 <BODY>
 <center>
<table align='center' border='1' bordercolor='#8CB3E3' cellpadding='0'
  cellspacing='0' style='border-collapse: collapse;' width='500px'>
  <tr>
  <td width="20%">
     <input type="checkbox" value="" id="" onclick="checkAll(this)"/>全选
  </td>
  <td width="80%">
   <table id='MultCheckBoxTag'>
     <tr id='mcbt_0'>
      <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='5' name='myCheckBox'/>选项1</td>
   <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='6' name='myCheckBox'/>选项2</td>
   <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='7' name='myCheckBox'/>选项3</td>
     </tr>
     <tr id='mcbt_1'>
       <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='8' name='myCheckBox'/>选项4</td>
    <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='9' name='myCheckBox'/>选项5</td>
    <td style='width:500'><input type='checkbox'  onclick='cbOnclick(this);' value='10' name='myCheckBox'/>选项6</td>
     </tr>
    </table>
   </td>
   </tr>
</table>
 </center>
 </BODY>
</HTML>

分享到：
| 分组统计记录数，并统计各分组数据的各分项 ...
评论
1 楼 chris_in 2008-12-25  
嗯，不错，还考虑的 部分选中的情况！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    多个datatable共存造成多个表格的checkbox都被选中

    该控件中的checkbox小插件的id是写死的，所以当有多个datatable引用到一个页面中的时候，全选事件会匹配全部的datatable，所以造成全部多个表格的checkbox被都被选中。 【解决方法】 所以最好是修改jquery....

    bootstrap table插件的分页与checkbox使用详解

    今天需要实现这样一个功能，有checkbox列表可供选择，要选择不分页之间的行并保存 最终实现的功能如图：（图片来自网上） 具体实现 首先，来看具体的代码，这里只截取实现功能所需代码 var selectionIds =[],...

    多个jquery.datatable共存,checkbox全选异常的快速解决方法

    该控件中的checkbox小插件的 id是写死的，所以当 有多个datatable 引用到一个页面中的时候，全选事件会匹配全部的datatable ，所以造成全部多个表格的 checkbox被都被选中。 【解决方法】 所以最好是修改jquery....

    uniapp-table中改版uni-table插件

    改版uni-table插件功能，新增单击行事件、单击某td事件、单独修改某td的字体颜色；选中行样式修改。主要修改文件uni-tr、uni-td;

    基于react-window 库编写的一个超灵活的表格源码+项目说明.zip

    - 行选中，默认显示行号，hover之后显示checkbox, 自身被选中或者子元素被选中，则checkbox选项框会持续显示。 有可能的计划 考虑使用canvas渲染表格，替换react-window，整个项目重写，模块化、配置化。列可...

    jQuery+Datatables实现表格批量删除功能【推荐】

    Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1：点击全选的选择框CheckBox，选中...

    jQuery表格行全选反选单选代码.zip

    jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多选。

    labeled-checkbox-material-ui：一种材料UI组件，在单个组件中结合了复选框和标签

    一个material-ui组件，在单个组件中结合了复选框和标签 演示版 您可以在访问该组件的故事书。 道具 该组件接受下表中定义的道具。 LabeledCheckboxMaterialUi接受的道具 姓名 类型 必需的 默认 描述 已检查 布尔值 ...

    ExtJS(ajax框架) 4.2.1

    自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用...

    程序天下:JavaScript实例自学手册

    9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用...

    treeGrid、树形表格

    treegrid插件 关闭所有节点" onclick="expandAll('N')"&gt; 展开所有节点" onclick="expandAll('Y')"&gt; 取得当前行的数据" onclick="selectedItem()"&gt; 当前选中的行： &lt;div id="div1"&gt;&lt;/div&gt; var config =...

    Vue 基于 vuedraggable 实现选中、拖拽、排序效果

    今天有个朋友说要做个效果：Vue实现拖拽排序，要有 checked，输出结果是排序后的，要全选，未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了，没看太明白，他就自己基于 vuedraggable ...

    DELPHI 表格控件DBGridEh史上最全使用资料(101页)

    一、 DBGridEh（增强型表格组件）功能详解.....................................................................4 二、应用实例.................................................................................

    jQuery-Filterable:使用这个 jQuery 插件使表格可过滤

    使用这个 jQuery 插件使表格可过滤。 安装 只需在您的 HTML 页面中包含 jQuery 和filterable.js 。 ##Usage 在 JavaScript 中，启用过滤插件可以像这样简单： $ ( '#my-table' ) . filterable ( ) ; 为了使其...

    asp.net知识库

    帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱，拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版（附答案） 一个...

    wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格

    扩展主要包括：显示边框、固定高度、显示复选框、复选框选中是否遵循父子关联、复选框禁用条件。 - 这里有一个兄弟组件-树形穿梭框： - 快速上手 npm i @weilan/el-tree-table --save 或 npm i @weilan/el-tree-...

    vfp6.0系统免费下载

    问题 2-7: 我的 Visual FoxPro 5.0 表单中包含有 ListView 或 TreeView 控件，它们不继承其新版本中的最新功能（如支持复选框）。已发布的应用程序中，由于带有这些表单，而在最终用户的机器上出现表单 OLE 错误，...

    vue实现带复选框的树形菜单

    主要为大家详细介绍了vue实现带复选框的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Magicbox
Global site tag (gtag.js) - Google Analytics