<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
<!--
// 说明：Javascript 控制 CheckBox 的全选与取消全选
// 整理：http://www.CodeBit.cn
function checkAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = false;
}
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br />
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关
<input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br /><br />
<input type="button" value="选择所有的字母" onclick="checkAll('test')" />
<input type="button" value="清空选中的字母" onclick="clearAll('test')" />
<br /><br />
<input type="button" value="选择所有的数字" onclick="checkAll('num')" />
<input type="button" value="清空选中的数字" onclick="clearAll('num')" />
</body>
</html>
分享到：
相关推荐
在上面的代码中，我们有一个全选复选框（`#selectAll`）和多个行内复选框（`.itemCheckbox`）。全选复选框用于控制所有行内复选框的状态。 接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来...
- 在JavaScript中，我们可以获取到页面上所有的复选框，通常是通过类名或者ID来选择，如`document.querySelectorAll('input[type=checkbox]')`。 - 当用户点击全选复选框时，遍历这些复选框并改变它们的`checked`...
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
这段代码的意思是：当 "全选" 复选框被点击时，找到所有具有 `.childCheckbox` 类的子复选框，并将它们的 `checked` 属性设置为与 "全选" 复选框相同的状态。 此外，为了提供反选（即取消所有选中项）的功能，我们...
这里我们检查表头`CheckBox`的状态，并同步到每一行的复选框。当然，这需要在数据绑定到`DataGridView`之前，确保第一列是可勾选的`DataGridViewCheckBoxCell`。 为了使用户的选择能够被程序识别和处理，我们需要在...
当树形组件结合复选框时，可以实现用户对节点的选择操作，如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常实用。 首先，我们要理解ExtJS树形组件的基本构造。一个树形组件由节点（Nodes...
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
这个“基于jQuery实现的全选、反选复选框插件源码例子”是一个很好的学习资源，可以帮助开发者理解如何利用jQuery来操控DOM（Document Object Model）中的复选框，并实现全选与反选的功能。 首先，我们要了解jQuery...
本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能，以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`<input type="checkbox">`标签创建。默认情况下，`...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
全选反选的核心思想是通过更改一个主复选框的状态（通常被称为“全选”按钮）来同步所有子复选框的状态。当“全选”按钮被选中时，所有子复选框应被选中；反之，如果“全选”按钮被取消选中，所有子复选框则应被取消...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...
"JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中...
在网页开发中，Checkbox（复选框）是用户界面中常用的一种元素，它允许用户从多个选项中选择一个或多个。全选和反选功能在多选列表中尤其常见，例如在批量操作或者多条件筛选时。以下是三种实现Checkbox全选和反选的...
本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...
当涉及到HTML表单中的复选框（checkbox）时，全选、反选和取消全部勾选的功能是非常常见的需求。这些功能可以提高用户体验，让用户能够方便地选择或取消一组相关选项。本文将详细讲解如何利用JavaScript实现这些功能...