我自己写了一个例子，用jQuery全选checkbox。
附件中有完整的代码。
<html>
<head>
<style>
table {
border: 1px solid black;
}
.checkbox {
}
</style>
<script type="text/javascript" src='jquery-1.10.2.js'></script>
<script type="text/javascript">
$(function() {
//给全选的checkbox添加动作
$('#checkboxAllId').click(function() {
if ($(this).prop('checked')) {
$('.checkbox').each(function(i, d) {
$(this).prop('checked', true);
});
} else {
$('.checkbox').each(function(i, d) {
$(this).prop('checked', false);
});
}
});
//给每一个子checkbox添加动作
var checkboxObj = $('.checkbox');
checkboxObj.click(function(i, d) {
var checkedArr = [];
var checkboxArr = [];
if ($(this).prop('checked')) {
checkboxObj.each(function(i, d) {
if ($(this).prop('checked')) {
checkedArr.push(this);
}
checkboxArr.push(this);
});
$('#checkboxAllId').prop('checked',
(checkedArr.length == checkboxArr.length));
} else {
$('#checkboxAllId').prop('checked', false);
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="checkboxAllId" value="-1" />全选</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="1" />1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="2" />2</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="3" />3</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="4" />4</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="5" />5</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="6" />6</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="7" />7</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="8" />8</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" value="9" />9</td>
</tr>
</table>
</body>
</html>
相关推荐
### jQuery实现全选CheckBox功能详解 #### 背景与需求 在Web开发中，特别是在表单处理方面，经常会遇到需要实现多个复选框（CheckBox）的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验，还能...
在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
"jQuery全选"这个主题，就是关于如何使用jQuery实现表格或其他列表元素的全选和反选功能。下面，我们将深入探讨这一知识点，包括相关原理、代码实现以及实际应用。 一、jQuery全选的基本概念 在网页交互中，用户...
总结来说，"Jquery全选反选Checkbox"是一个提高用户体验的实用功能，通过jQuery的DOM操作和事件处理，我们可以轻松实现全选和反选的效果。而提供的压缩包资源则提供了具体的实现代码，便于开发者学习和使用。
综上所述，"checkbox实现全选和反选经典例子"是一个关于如何在Web应用中利用Checkbox控件提高用户交互性的实践教程。通过理解Checkbox的基本操作，结合服务器控件的事件处理和逻辑编程，我们可以创建出高效且易于...
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...
### jQuery全选checkbox功能实现代码 #### 知识点： 1. **DOM操作**：代码中使用了jQuery来操作DOM，包括获取checkbox元素、设置checkbox的checked属性和修改按钮的value属性。 2. **事件处理**：介绍了如何通过...
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行全部选中或全部取消时，这种功能特别实用，例如在数据筛选、表单提交等场景。插件通常通过监听复选框的变化，来控制...
C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作，通过CheckBox来全选CheckBoxList，当有一个CheckBoxList选中时，CheckBox则被选中，且并且可以取得选中的CheckBox和CheckBoxList的value和text
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
本文将详细介绍如何使用jQuery和纯JavaScript来实现Checkbox的全选与反选功能。 #### 二、基础知识回顾 ##### 1. Checkbox简介 Checkbox是一种允许用户进行多项选择的表单控件。每个Checkbox都有一个`checked`...
在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能，以及如何进行表单验证。 1. **全选功能** 要实现全选功能，首先我们需要一个主复选框...
本文主要介绍了使用jQuery来实现网页中checkbox全选功能的完整实例。通过这个实例，读者可以学习到如何通过jQuery的事件响应机制来动态控制页面上元素的属性，特别是在处理复选框全选/取消全选逻辑时的应用技巧。 ...
jquery实现checkbox全选、反选、全部选，很不错的资源，欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...
全选功能可以通过监听全选Checkbox的`change`事件来实现，然后遍历所有子Checkbox并设置其`checked`属性： ```javascript $(document).ready(function() { $('#selectAll').on('change', function() { $('.item')...
页面上通过一个checkbox实现全选与反选