想不到贴个大家可能需要的js脚本出来，这么多人喜欢踩 ~
在WEB项目中关于全选的checkbox功能肯定会遇到，而且每个项目中都会有不少的地方会用到。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。
例子示意图如下：
代码如下：
<!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=UTF-8">
<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>
/**
* 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;
}
}
}
}
附件：本文使用的例子全部在最后的压缩包zip（example.zip）中。
------------------------------------------
分享知识，分享快乐，希望文章能给需要的朋友带来小小的帮助。
- 大小: 9.2 KB
分享到：
相关推荐
在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...
这个标题和描述虽然重复，但明显是在强调使用JS实现`checkBox`的全选功能。下面我们将详细探讨如何利用JavaScript来实现这一功能。 首先，HTML部分，我们需要定义一组`checkBox`，并添加一个特殊的`checkBox`作为...
标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框（checkbox）以及全选功能。EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列预定义的 CSS 样式和 JavaScript 组件，帮助...
在这个场景中，通常会有一个顶层的全选checkbox，以及一系列代表商品的子checkbox，用户可以对单个商品进行选择，或者通过全选按钮一键选中所有商品。这个功能需要考虑浏览器的兼容性，确保在大部分浏览器上都能正常...
### JS控制Checkbox全选、取消全选与删除功能 在前端开发中，处理表单数据时经常需要用到对多个复选框（checkbox）的操作，比如全选、取消全选以及基于选择状态进行某些操作（如删除）。本文将详细介绍如何通过...
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能，以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`<input type="checkbox">`标签创建。默认情况下，`...
在网页开发中，Checkbox（复选框）是用户界面中常用的一种元素，它允许用户从多个选项中选择一个或多个。全选和反选功能在多选列表中尤其常见，例如在批量操作或者多条件筛选时。以下是三种实现Checkbox全选和反选的...
- 前端JavaScript：添加一个事件监听器，当全选CheckBox被选中时，遍历其他CheckBox并设置它们的checked属性。 - 后端C#：在服务器端，可以将全选CheckBox的CheckedChanged事件绑定到一个方法，该方法遍历所有子...
本篇文章将详细讲解如何进行CheckBoxList的操作，包括获取选中项、实现全选、取消选中以及反选功能，并结合JavaScript进行交互式操作。 首先，我们来了解`CheckBoxList`的基本结构。在ASP.NET中，CheckBoxList控件...
- 对于checkbox全选功能，要注意处理可能出现的边界情况，如当数据为空或只有一条数据时，全选checkbox的状态应该如何设置。 通过以上步骤和策略，我们可以实现一个既高效又友好的GridView分页和全选功能。这不仅...
综上所述，这个案例涵盖了CSS美化`checkbox`、实现全选/取消全选功能及计算选中数量的核心技术。通过学习和实践，开发者可以为网页中的`checkbox`添加更具吸引力的视觉效果，并提升用户交互体验。
1、选中全选按钮，下面的所有按钮都会被选中； 2、取消选中全选按钮，下面的所有按钮也会被取消选中； 3、其他按钮全部被选中，全选按钮也跟着被选中； 4、其他按钮只要有一个没有被选中，全选按钮也不会被选中。
综上所述，通过在GridView中添加全选按钮并利用客户端JavaScript控制，我们可以实现高效且用户友好的全选功能。这个过程涉及到前端HTML、CSS和JavaScript，以及后端ASP.NET的控件操作和事件处理。在实际项目中，可以...
这种方法通过JavaScript来实现，当全选按钮被点击时，遍历具有相同名称的所有Checkbox，并根据全选按钮的状态来设置它们的选中状态。 ```html <input type="checkbox" name="chk"> <input type="checkbox" name...
- 在提供的示例代码中，首先定义了一个名为“quanxuan”的函数，该函数会被全选checkbox的onclick事件触发。 - 在函数内部，首先通过document.getElementsByName("nation")获取了所有具有相同name属性值的checkbox...
在本文中，我们将深入探讨如何使用JavaScript来处理复选框（checkbox）的选择状态，包括全选和多选的功能。 ### 全选与多选复选框的实现 #### 函数`checkallbox()`详解 此函数的目标是实现“全选”功能。当用户...
在页面上添加一个`<input type="checkbox">`作为全选按钮，当用户点击该按钮时，通过JavaScript遍历所有行中的复选框（假设每个数据行都有一个对应的复选框），并设置它们的状态为选中。例如，你可以添加以下...