<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$( function() {
$('.checkAll').live('change',function() { //元素绑定一个简单的click事件
$('.cb-element').attr('checked', $(this).is(':checked' )?'checked':''); //匹配给定的属性是某个特定值的元素
$(this).next().text($(this).is(':checked')?'全选':'反选'); //用于筛选的表达式(条件表达式)
});
$('.cb-element').live( 'change', function() {
$('.cb-element').length == $('.cb-element:checked').length ? $('.checkAll').attr('checked','checked').next().text('全选'):$('.checkAll').attr('checked','').next().text('反选');
});
});
</script>
</head>
<body>
<div class="controls">
<span><input type="checkbox" class="checkAll"/><b><label id="lbl">全选/反选</label></b></span>
</div>
<div class="elements">
<span><input type="checkbox" class="cb-element"/>Checkbox1</span>
<span><input type="checkbox" class="cb-element"/>Checkbox2</span>
<span><input type="checkbox" class="cb-element"/>Checkbox3</span>
<span><input type="checkbox" class="cb-element"/>Checkbox4</span>
</div>
</body>
</html>
分享到：
相关推荐
### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分，它提供了一个灵活的方式来展示数据列表，并且支持多种功能，如排序、分组、筛选等。在...
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
综上所述，这个“android ListView中的checkBox全选和反选Demo”主要展示了如何在ListView中集成CheckBox，实现列表项的全选和反选功能，以及如何优化Adapter以提高性能。理解并掌握这些知识点对于Android开发者来说...
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...
在Windows应用程序开发...总之，`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。
实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等.. 程序收集了本人在ASP.NET开发应用中会经常用到的轻量级的AJAX小例子，程序里面很多地方做了注释，通俗易懂...
页面上通过一个checkbox实现全选与反选
本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先，我们需要理解CheckBox的基本用法。在XAML中，我们可以创建一个CheckBox并为其设置文本和初始状态： ```xml <CheckBox Content="全选" x:Name=...
在本示例中，我们将探讨如何实现GridView中的全选/反选功能，通过复选框（checkbox）来实现这一操作。这个示例特别适合于那些需要用户批量处理数据的应用场景。 首先，`Default.aspx`是用户界面的主要部分，它包含...
在JavaScript编程中，"全选/反选"是常见的用户交互功能，常见于表格、列表等数据展示场景，允许用户一次性选择或取消选择所有项目。这个功能在网页表单、电子表格应用、在线文档编辑器等领域都有广泛的应用。在本...
js原生，checkbox全选，反选，选特定的值。jq会更简单。。初学时候比用的
资源名称：JS实现checkbox的全选和反选资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
**一、Checkbox全选与反选** 1. **Checkbox基本概念**：Checkbox是HTML中的一种表单元素，用于用户输入布尔值（即“选中”或“未选中”）。通过设置`checked`属性，可以默认选中一个复选框。 2. **全选功能**：在...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
asp.net(C#)，DataList控件里嵌入CheckBox，实现全选、反选以及删除功能。
在前端开发中，checkbox全选、反选、取消的操作是常见的功能需求，通常用于实现批量操作。在此过程中，开发者可能会遇到一些问题，例如页面在执行这些操作时出现异常。这里会详细探讨相关知识点，包括checkbox的基本...
在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...
在“checkbox全选与反选”的场景中，我们通常会遇到行全选、列全选以及相应的联动效果。下面将详细阐述这个主题的知识点。 一、全选与反选的基本原理 全选功能是通过一个主复选框控制所有子复选框的状态，当主复选...