`

网页全选javascript组件

    博客分类：
  • html
JavaScriptIEFirefoxHTML 
阅读更多
这是个网上找的网页复选框js全选组件例子。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>checkbox的js全选功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <link href="default.css"  type="text/css" rel="stylesheet" /> 
<script language="JavaScript"  src="selectall.js"></script> 
<script>     function sel(obj){ 
         _tlsCheckboxSelAll(document.frmUser,obj); 
    
} </script> </head>

<body  bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">		 <center><b>checkbox的js全选功能</b></center> 

<form name="frmUser"  id="frmUser" method="post">			 
<table class="tabelBoder"   width="100%" align="center" cellspacing="0" cellpadding="3" border="0"> <tr  height="30" class="RH1"> <td width="4%" align="left">

全选<input type="checkbox"  name="id_all" id="id_all" value="46" onclick="sel(this)"></td> <td  width="17%" align="left">姓名</td> <td width="23%" align="left">地址</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left">

<input  type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td width="17%" align="left">张三</td> <td width="23%" align="left">北京</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left">

<input  type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td width="17%" align="left">李四</td> <td width="23%" align="left">上海</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left">

<input  type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td  width="17%" align="left">王五</td> <td width="23%" align="left">天津</td> </tr> </table> </form> <ui>     <li>支持ie和firefox</li>     <li>选中全选 checkbox，则所有子checkbox自动选中</li>     <li>去掉选中全选checkbox，则所有 子checkbox自动全部取消选中</li>     <li>如果选中全部子checkbox，则全选 checkbox自动选中</li>     <li>全选后，如果去掉选中任何子checkbox，则全选 checkbox自动取消选中</li> </ul> </body></html>


js代码： 
/**
 * checkbox的点击方法
 * 要求：
 * 1.全选/全不选的checkbox的name属性为 单个checkbox的name属性名+_all , 注意:最后必须为_all.
 *   例如:单个checkbox的name=or_id,则全选checkbox的name=or_id_all
 * 2.全选/全不选的checkbox必须定义id属性,并且id属性值与name属性值相同
 * 3.所有单个的checkbox在同一个form中.
 * 4.全选/全不选的checkbox可以在form中也可以在form外面.
 * 5.整个页面不允许再有和全选/全不选checkbox同name和同id的组件.
 * 
 */
function _tlsCheckboxSelAll(formObj,checkboxClicked){
	var checkName = checkboxClicked.name;//取得点击的checkbox的name属性
	var index = checkName.indexOf("_all");//判断是否有_all字符串
	var isAll = false;
	if(index!=-1){//如果有_all
		if(index+"_all".length==checkName.length){//满足说明_all是在最后面，表示这是个全选/全不选的checkbox.
			isAll = true;
		}
	}
	var thisChecked = checkboxClicked.checked;//当前checkbox的状态 true=选中 false=不选中
	if(isAll){//点了全选/全不选的checkbox
		var childCheckName = checkName.substring(0,index);
		eval("var allChildCheckboxs = formObj."+childCheckName);
		var childCheckboxCount = allChildCheckboxs.length;
		if(childCheckboxCount==null){//只有1个单个的checkbox
			allChildCheckboxs.checked = thisChecked;
		}else{//有2个或2个以上的单个checkbox
			for(var i=0;i<childCheckboxCount;i++){
				allChildCheckboxs[i].checked = thisChecked;
			}
		}
	}else{//点了单个的checkbox
		var parentCheckboxName = checkName+"_all";
		if(thisChecked==false){
			document.getElementById(parentCheckboxName).checked=false;
		}else{//判断点了当前checkbox后是否全部的单个checkbox都处于true状态
			eval("var allChildCheckboxs = formObj."+checkName);
			var childCheckboxCount = allChildCheckboxs.length;
			var isAllChecked = true;
			if(childCheckboxCount==null){//只有1个单个的checkbox
				if(allChildCheckboxs.checked==false){
					isAllChecked = false;
				}
			}else{//有2个或2个以上的单个checkbox
				for(var i=0;i<childCheckboxCount;i++){
					if(allChildCheckboxs[i].checked==false){
						isAllChecked = false;
						break;
					}
				}				
			}
			if(isAllChecked){//全部单个checkbox都处于true状态
				document.getElementById(parentCheckboxName).checked=true;
			}
		}
	}
}
分享到：
| JSTL的c:forEach标签
评论
发表评论

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

相关推荐

    淘宝购物车全选js

    JavaScript是一种轻量级的解释型编程语言，常用于网页和网络应用的前端开发，可以实现实时的用户交互。 1. **全选按钮功能**： 当用户点击“全选”按钮时，JavaScript可以遍历页面上所有的商品复选框（checkbox）...

    js 全选——清空

    在网页中，全选通常涉及`&lt;input type="checkbox"&gt;`元素。当用户点击一个“全选”按钮时，所有相关的复选框应该被选中。这可以通过设置复选框的`checked`属性来实现。你可以创建一个函数，如`selectAll()`，该函数...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框（checkbox）以及全选功能。EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列预定义的 CSS 样式和 JavaScript 组件，帮助...

    解决ext下拉列表全选和去全选功能

    在IT行业中，尤其是在Web开发领域，`EXTJS`是一个广泛使用的JavaScript库，它提供了一套完整的组件模型，用于构建富客户端应用。标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求，特别是在数据表格...

    jquery 复选框 全选，全不选

    在网页设计中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理和动画效果时。本话题主要关注如何使用jQuery来实现复选框的全选和全不选功能。在HTML...

    微信小程序实现多选框全选与取消全选功能示例

    下面将详细讲解如何通过JavaScript（JS）、WXML（微信小程序的XML标记语言）和WXSS（微信小程序的CSS样式语言）来实现这一功能。 首先，我们来看JS部分。在这个例子中，`Page` 是微信小程序的基本页面结构，包含了...

    Extjs全选去掉

    ExtJS是一个流行的JavaScript库，用于构建富客户端应用，它提供了丰富的组件库，包括表格（Grid）等，这些组件通常具有多选功能，用户可以通过全选按钮一次性选择所有行。 在ExtJS的表格组件中，全选功能是通过一个...

    Element-ui中 选择器（select）多选下拉框实现全选功能.zip

    在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`&lt;el-select&gt;`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...

    GridView 内加全选按钮 客户端控制

    在ASP.NET开发中，GridView控件是用于展示数据表格的常用组件，它可以方便地进行数据绑定、排序、分页和编辑等操作。然而，有时我们需要为GridView添加全选功能，以便用户可以一次性选择所有行。这个功能通常通过在...

    datagrid全选(JS)

    通过上述介绍，我们可以看到，使用简单的JavaScript代码即可实现数据表格的全选和反选功能。这不仅提高了用户的操作效率，还提升了应用程序的整体体验。开发者可以根据实际需求调整代码逻辑，例如增加更多高级功能或...

    全选，反选，点击item取消全选，最后获取点击item的内容

    这个功能通常与复选框（CheckBox）组件紧密相关，下面将详细解释这个过程。 **复选框（CheckBox）** 是UI设计中的基本元素，允许用户在多个选项中进行选择或取消选择。在编程中，复选框通常与事件监听器一起使用，...

    select复选框带全选

    在网页设计和开发中，Bootstrap 是一个非常流行的前端框架，它提供了一系列的组件和工具，帮助开发者快速构建响应式和用户友好的界面。在Bootstrap中，"select复选框"通常指的是一个下拉选择列表，其中包含多个可选...

    struts2标签 全选,反选

    在探讨Struts2框架中的全选与反选功能时，我们深入分析了如何利用Struts2的标签系统以及JavaScript来实现这一需求。Struts2框架是Java Web开发中广泛使用的一个MVC（Model-View-Controller）框架，它提供了一系列...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    在Vue组件中，我们定义了`shoppingListData`来存储购物车商品列表，以及`selectedData`数组来记录被选中的商品ID，`AllChecked`来表示是否全选状态。 ```javascript data() { return { shoppingListData: { rows...

    vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip

    此外，为了实现全选/取消全选的功能，可以在`el-select`组件上添加一个`@change`事件监听器，当选择项发生变化时触发`toggleAllChecked`方法： ```html v-model="value" multiple placeholder="请选择" @...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox，这是一种允许用户多选的下拉列表控件。在实际应用中，全选功能常常被用来快速选择所有选项，极大地提高了用户的操作...

    vue树， vue-tree,vue写的树形结构，包括删除，全选

    Vue.js 是一个流行的前端JavaScript框架，它以其轻量级、高效和易用性著称。在Vue项目中，实现树形结构（Tree）是常见的需求，例如用于展示层级数据，如目录结构、组织架构或者权限管理等。Vue Tree组件允许开发者以...

    js 全选/反选/删除选择等代码 (精华)

    在JavaScript编程中，全选、反选和删除选择等功能是网页交互中常见且重要的操作，尤其是在数据表或者多选项列表中。这些功能可以极大地提升用户体验，使得用户能够快速地进行批量操作。以下是对这些概念的详细说明：...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性，即在树形结构中添加复选框（checkbox）功能，并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用，比如文件...

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