<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框（checkbox）全选/全不选/返选</title>
<style>
body,dl,dt,dd,p{margin:0;padding:0;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:700;}
p{margin-top:10px;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function ()
{
for (var i = 1, n = 0; i < oInput.length; i++)
{
oInput[i].checked && n++
}
oInput[0].checked = n == oInput.length - 1;
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
}
</script>
</head>
<body>
<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项（一）</label></p>
<p><input type="checkbox" name="item" /><label>选项（二）</label></p>
<p><input type="checkbox" name="item" /><label>选项（三）</label></p>
<p><input type="checkbox" name="item" /><label>选项（四）</label></p>
<p><input type="checkbox" name="item" /><label>选项（五）</label></p>
<p><input type="checkbox" name="item" /><label>选项（六）</label></p>
<p><input type="checkbox" name="item" /><label>选项（七）</label></p>
<p><input type="checkbox" name="item" /><label>选项（八）</label></p>
<p><input type="checkbox" name="item" /><label>选项（九）</label></p>
<p><input type="checkbox" name="item" /><label>选项（十）</label></p>
</dd>
</dl>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</body>
</html>
分享到：
相关推荐
在描述中提到的“全选/全不选”功能，是多选下拉框的一种高级特性，它提供了快速选择或取消所有选项的便利。 首先，我们来看看`LovCombo.js`，这可能是一个自定义的组合框组件，扩展了ExtJS的原生ComboBox类，以...
2. 在列表下方放置一个“全选/全不选”复选框，当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”复选框后，列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后，...
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
在网页开发中，常常会遇到需要实现复选框（checkbox）的全选、全不选以及单个选择的功能。这里我们主要探讨如何使用原生JavaScript和jQuery来实现这一功能，同时考虑到行内点击选择的效果。本文将详细介绍两种实现...
在jQuery中，实现复选框（checkbox）的全选/全不选功能是常见的需求，尤其是在数据筛选、表格操作等场景。本篇文章将详细介绍如何使用jQuery编写一个通用的全选/全不选功能。 首先，我们需要理解jQuery选择器的工作...
当我们需要在数据表中实现多选功能时，通常会在表头添加一个`Checkbox`，以实现全选或反选所有行的功能。这个过程涉及到事件处理、控件交互以及UI设计等多个方面的知识点。 首先，我们需要在`DataGridView`的表头行...
在JavaScript编程中，"js控制复选框全选、全不选"是一个常见的需求，尤其在数据表或者选项列表中，用户可能希望一次性选中或取消所有复选框。这个功能可以通过编写简单的JavaScript代码实现。这里我们将深入探讨如何...
在JavaScript编程中，“全选”和“全不选”功能是常见的用户交互设计，尤其在数据列表或表格中，用户通常需要快速选择或取消选择所有项目。这些功能可以通过简单的JavaScript代码实现，通常与HTML的复选框（checkbox...
javaScript入门案例之复选框全选，全不选，反选
axure复选框全选反选效果.rp
在上述代码中，`this.checked`代表主复选框的当前状态，将其赋值给每个子复选框，实现了全选/全不选。 反选功能则需要将所有子复选框的选中状态与主复选框的当前状态相反。这可以通过遍历子复选框并切换它们的`...
本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码，以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框（Checkbox）是Web表单中常见的元素，...
复选框的应用（全选、反选、全不选效果）
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
在学习和实现Vue多级复杂列表的展开/折叠及全选/分组全选功能时，我们需要关注一些关键技术和实现方法。首先，我们要了解如何构建数据结构，这是展示列表的基础。然后，我们需要掌握如何通过数据驱动的方式初始化...