js实现复选框的全选与反选
作用：
a.单击列头复选框全选或全不选子项
b.只要有一个子项没有选中，则取消列头的选中状态
c.当所有子项目选中时，列头复选框自动置为选中状态
d.将子项的复选框反过来选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
// --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
// --反选被单击---
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="1">
<tr bgcolor="#FFFF66">
<td>
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>
<td align="center">复选框全选示例 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>
<td> 作用： </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>
<td> a.单击列头复选框全选或全不选子项 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>
<td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>
<td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#66FFFF">
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
<td align="center">反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
#### 二、原生JavaScript实现复选框全选与反选 除了使用jQuery外，还可以使用原生JavaScript来实现相同的功能。 **2.1 全选功能** ```javascript // 全选 function chooseAll() { var selects = document....
在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...
在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...
这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决方案。JavaScript是一种广泛使用的客户端脚本语言，用于为网页添加交互性。 复选框（Checkbox）是HTML中的一个基本元素，它允许用户对一个选项...
在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
### JavaScript 复选框全选与反选 在Asp.net中，前端交互通常由JavaScript来实现。对于复选框（checkboxes）的全选和反选，可以通过JavaScript的DOM操作来实现。以下是一个基本示例： ```javascript // 获取复选框...
下面将详细讲解这个主题，包括复选框、多级目录树以及全选和反选的实现原理。 1. **复选框（Checkbox）**： 复选框是用户界面中常用的一种控件，它允许用户在多个选项中进行多选。在HTML中，`...
同时，还需要考虑如何处理用户直接操作单个复选框的情况，确保全选和反选按钮的状态与当前选中项保持一致。 除了前端，全选和反选的概念也广泛应用于后端数据库操作。例如，用户可能需要批量删除或更新一组记录。在...
JS实现复选框全选反选
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
总的来说，通过SpreadJS，我们可以轻松地在Web应用中实现与Excel类似的功能，包括列头复选框全选。借助提供的示例代码和库文件，开发者可以快速理解和实现这一特性，提升用户体验。在实际开发中，应结合具体需求对...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
以下是用原生js实现的复选框全选/反选的实现，选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 <!DOCTYPE html> <html lang="en"> <head>...
本文将详细介绍如何使用JavaScript实现复选框的全选、反选功能，并探讨相关的脚本编写技巧。 首先，我们需要理解复选框的基本HTML结构。一个简单的复选框标签是这样的： ```html ``` 这里的`type="checkbox"`...
复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何编写全选和反选功能，以及它们的基本工作原理。 首先，全选功能...
本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...
### 多选框全选与反选功能实现 在网页开发中，经常需要用到表单来收集用户的选择。其中，多选框（复选框）是一种常见的控件类型，用于允许用户选择一个或多个选项。本篇文章将详细介绍如何利用JavaScript实现多选框...
总结来说，"JQ 复选框全选反选"是jQuery中常见的用户交互功能，通过选择器定位复选框，绑定事件处理函数，以及利用DOM操作改变元素属性，可以轻松实现这一功能。在实际开发中，理解并掌握这些基础技巧对于提升用户...