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

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

阅读更多

如何对表格中的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  
嗯,不错,还考虑的 部分选中的情况!

相关推荐

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    在本文中,我们将深入探讨如何在layui框架中创建一个表格,其中某一列显示为复选框(checkbox),以便实现单选功能。layui是一款基于前端的轻量级组件库,提供了丰富的UI组件,包括表格(table)、按钮、表单元素等...

    两层嵌套的checkbox记录选中状态

    综上所述,"两层嵌套的checkbox记录选中状态"涉及到的是Android UI组件的深度定制和交互逻辑的设计,需要开发者对Android的Adapter机制、事件处理、数据结构以及性能优化有深入理解。在实际开发中,这样的需求可能会...

    微信小程序获取复选框全选反选选中的值(实例代码)

    通过本文的学习,你应该掌握了微信小程序中如何使用`checkbox`和`checkbox-group`组件,以及如何通过事件处理函数来获取和更新用户选中的复选框的值。同时,了解了数据绑定与更新的基本操作,以及通过WXSS来设置界面...

    gridview 分页保存每页的Checkbox选中的值

    在ASP.NET开发中,GridView控件是一个非常常用的数据展示组件,尤其在处理表格数据时。在涉及分页功能时,用户可能需要在多页中选择不同的数据项,例如通过复选框(Checkbox)来标记。当用户在多页之间切换并进行...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消选中其中的一项,全选复选框仍然保持选中状态,这显然不符合用户的预期。本文将深入探讨这个问题,并提供解决方案。 首先,我们需要...

    layui动态禁用checkbox.rar

    本教程将深入探讨如何在layui的表格中动态禁用部分checkbox,并在全选操作时排除这些禁用的checkbox。 首先,我们需要了解layui table的基本用法。layui table可以通过JSON数据或Ajax异步加载数据,同时提供列定义...

    BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    它结合了Bootstrap框架的样式和JavaScript插件的功能,使表格更具吸引力和实用性。本篇将详细介绍如何在Bootstrap Table中实现复选框的默认选中功能,特别地,我们将根据从数据库获取的状态来决定复选框是否被选中。...

    checkbox 选中一个另一个checkbox也会选中的实现代码

    在网页设计和开发中,`checkbox` 是一种常用的表单元素,用于用户进行多选操作。当需要实现“选中一个 `checkbox` 另一个也会被选中”的功能时,通常会涉及到事件监听和状态同步。这篇教程将详细介绍如何通过 ...

    layui table 复选框跳页后再回来保持原来选中的状态demo

    7. 代码优化:为了提高性能和用户体验,避免不必要的全表重新渲染,我们只对涉及到的行进行更新。 在提供的压缩包文件"layui-page-select-demo"中,应该包含了实现这一功能的示例代码。通过查看和学习这个示例,你...

    C#DataGridView中DataGridViewCheckBox问题.doc

    在C#编程中,`DataGridView`控件是一个非常实用的组件,用于展示表格数据并允许用户进行交互。在处理带有复选框(`DataGridViewCheckBox`)的`DataGridView`时,通常需要实现全选和全取消的功能,以及根据单个复选框...

    layui checkbox默认选中,获取选中值,清空所有选中项的例子

    layui是一款基于前端JavaScript库的模块化前端框架,提供了丰富的UI组件,包括表格、表单、按钮等,而checkbox是其中常用的一种表单元素。 首先,我们要了解如何在layui中实现checkbox的默认选中。在HTML结构中,...

    layui之table checkbox初始化时选中对应选项的方法

    其中,layui的table组件是用于展示数据表格的重要工具,而checkbox则是表格中常用的一种交互元素,允许用户进行多选操作。本文将详细讲解如何在layui的table初始化时设置checkbox选中对应的选项。 首先,layui ...

    layui的表格table选中数据后可打印本行数据

    在Web开发中,layui是一个非常流行的前端框架,它提供了丰富的组件和美观的界面设计,而表格(table)是其中常用的一个元素。本示例主要关注如何在layui的表格中实现选中某一行数据后,仅将该行数据打印的功能。这个...

    复选框选中表格中的行进行删除行操作

    在IT领域,尤其是在Web开发和用户界面设计中,"复选框选中表格中的行进行删除行操作"是一项常见的功能需求。这个功能主要用于提供用户友好的数据管理方式,让用户能够批量选择并处理表格中的数据。下面我们将详细...

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

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

    layui 监听表格复选框选中值的方法

    layui的表格组件提供了`checkbox`事件,我们可以使用它来监听复选框的选中和取消状态。这里我们使用`table.on('checkbox(push_port_table)', function(obj)`来绑定事件,`push_port_table`是表格的唯一标识。 3. ...

    GridView控件中CheckBox(2.0)

    在ASP.NET 2.0 API中,GridView控件是一个常用的数据展示组件,它允许开发者以表格形式展示数据。本教程将深入探讨如何在GridView中集成CheckBox控件,以实现用户交互和数据操作。 首先,GridView控件是ASP.NET Web...

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    在网页开发中,表格(Table)是展示数据的常用组件,而jQuery库为开发者提供了丰富的API,使得操作表格中的元素,如复选框(Checkbox),变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...

    layui默认选中table的CheckBox复选框方法

    在本文中,我们将深入探讨如何在layui框架中实现默认选中table的CheckBox复选框。layui是一款流行的前端组件库,提供了丰富的UI组件,包括表格(table)和复选框(CheckBox)。在数据展示或者数据操作的场景中,我们...

    layui问题之模拟table表格中的选中按钮选中事件的方法

    在使用layui框架构建Web应用时,常常会遇到需要操作表格元素,尤其是处理表格中的选中按钮(checkbox)选中事件的情况。layui是一个轻量级的前端UI框架,它提供了丰富的组件,包括表格(table),方便开发者快速构建...

Global site tag (gtag.js) - Google Analytics