该文档v2.0版本链接
http://dalongxn.iteye.com/blog/1850347
上次有需求，就自己写了个文本框全选、全不选的js
为了以后方便，就在这里保存下吧。
<html>
<head>
<title>复选框全选、全不选</title>
<script type="text/javascript">
/**
* 操作全选复选框事件
**/
function doCheck(obj)
{
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type=="checkbox" && inputs[i].id!="chkMsgId") //刷选出所有复选框
{
inputs[i].checked=obj.checked;
}
}
}
/**
* 复选框变化 全选按钮变化
**/
function toChkSon(obj)
{
if(obj==false) //当此复选框未选中 全选为未选
{
document.getElementById("chkMsgId").checked=false;
return ;
}
var chkInputs=getCheckBox(); //获取所有复选框
var j=0;
for(var i=0;i<chkInputs.length;i++)
{
if(chkInputs[i].checked==obj)
j++;
else
break;
}
if(j==chkInputs.length) //当所有复选框为同一状态时 赋值全选同一状态
document.getElementById("chkMsgId").checked=obj;
}
/**
* 获取所有复选框
**/
function getCheckBox()
{
var inputs=document.getElementsByTagName("input");
var chkInputs=new Array();
var j=0;
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type=="checkbox" && inputs[i].id!="chkMsgId") //刷选出所有复选框
{
chkInputs[j]=inputs[i];
j++;
}
}
return chkInputs;
}
</script>
</head>
<body>
全选：<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this)" /> <br/>
复选框1：<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
复选框2：<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
复选框3：<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
复选框4：<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
复选框5：<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" />
</body>
</html>
大龙
2011/06/09
相关推荐
本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码，以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框（Checkbox）是Web表单中常见的元素，...
《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...
javascript 复选框全选，复选框全选，复选框全选
js 实现 复选框全选（二）! 值得下载看看!资源免费,大家分享!!
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...
在网页交互设计中，复选框...综上所述，通过JavaScript实现复选框全选全不选以及子复选框带动全选框的选中功能，主要涉及事件监听、DOM操作和状态同步。这种交互设计能提高用户操作的便捷性，提升网页应用的用户体验。
<title>jQuery 复选框全选全不选示例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" name="option" value="1"> ...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目中，你可能还需要考虑一些边缘情况，例如当子复选框动态添加或删除时，全选状态的更新等。这个小示例提供了一个基础框架，开发者可以根据具体需求进行...
在IT领域，尤其是在开发用户界面或者数据管理应用时，“行的增删”和“复选框全选全不选”是常见的功能需求。这两个概念主要涉及到数据操作和用户交互设计。 1. **行的增删**： 行的增删通常出现在表格或者列表...
#### 二、原生JavaScript实现复选框全选与反选 除了使用jQuery外，还可以使用原生JavaScript来实现相同的功能。 **2.1 全选功能** ```javascript // 全选 function chooseAll() { var selects = document....
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
#### 一、复选框全选与全不选功能实现 在Web开发中，实现复选框（checkbox）的全选与全不选功能是一种常见的需求，尤其是在表单数据处理中非常有用。通过这种方式，用户可以方便地选择或取消选择一组选项。 #### ...
在本教程中，我们将深入探讨如何使用JavaScript实现复选框的全选全不选功能。 首先，我们需要在HTML中设置复选框和全选/全不选按钮。例如： ```html <input type="checkbox" name="item" value="1"> Option 1...
javaScript入门案例之复选框全选，全不选，反选
CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决方案。JavaScript是一种广泛使用的客户端脚本语言，用于为网页添加交互性。 复选框（Checkbox）是HTML中的一个基本元素，它允许用户对一个选项...
"JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...