<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现全选取消反选</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
//全选
$(".checkAll").on("click", function() {
var checked = $(this).prop("checked");
$(".checkChild").each(function(i) {
if ($(this).attr("disabled") != "disabled") {
$(this).prop("checked", checked);
}
});
});
//反选
$(".reverseCheck").on("click", function() {
$(".checkChild").each(function(i) {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
//取消
$(".checkChild").click(function() {
var flag = true;
$(".checkChild").each(function(i) {
if (!$(this).prop("checked")) {
flag = false;
}
});
if (flag) {
$(".checkAll").prop("checked", true);
} else {
$(".checkAll").prop("checked", false);
}
});
});
</script>
</head>
<body>
<h5>js实现全选取消</h5>
<input type="checkbox" name="checkAll" class="checkAll" />全选
<input type="checkbox" name="reverseCheck" class="reverseCheck" />反选
<input type="checkbox" name="checkChild" class="checkChild" />语文
<input type="checkbox" name="checkChild" class="checkChild" />数学
<input type="checkbox" name="checkChild" class="checkChild" />英语
<input type="checkbox" name="checkChild" class="checkChild" />地理
</body>
</body>
</html><script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
相关推荐
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
<title>jQuery全选/反选示例 <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 全选" id="ckAll"/>水果 苹果" id="apple"/>苹果 香蕉" id="bann"/>香蕉 橘子" id="origin"/>...
demo46-jQuery全选，反选，取消选择.html
3. **全选和反选实现** - **全选Checkbox**：通常位于表格上方，当用户勾选此Checkbox时，所有行的Checkbox会被设置为选中状态。这可以通过监听全选Checkbox的`CheckedChanged`事件来实现，然后遍历DataGridView的...
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
接下来，我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现，然后遍历所有子Checkbox并设置其`checked`属性： ```javascript $(document).ready(function() { $('#...
反选功能与全选类似，但它的目的是取消所有已选中的复选框。以下是一个反选的JavaScript示例： ```javascript function deselectAll() { var checkboxes = document.getElementsByName('checkboxName'); for (var...
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check
本篇文章将详细讲解如何使用jQuery实现全选、反选功能，并探讨如何获取选中的值，这对于构建交互性强的前端应用来说至关重要。 1. **全选功能** 在网页中，我们经常遇到需要一次性选中所有复选框的场景。jQuery...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
三层架构是一种常见的软件设计模式，它将应用程序分为三个主要部分：...在实现全选、反选和多项删除等功能时，合理地利用JQuery处理前端事件，配合BLL和DAL进行业务逻辑和数据操作，能够构建出高效且易于扩展的系统。
本篇文章将详细讲解如何利用jQuery实现全选、反选功能，并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先，让我们理解全选和反选的基本概念。全选意味着选定所有可选项，而...
jQuery脚本部分将实现上述的全选、反选和取消选择的功能。你可以打开这个文件，查看实际的HTML和JavaScript代码，以了解这些功能是如何结合在一起工作的。 5. **优化与扩展**：为了提高用户体验，还可以添加额外的...
首先，我们来看一段用jQuery实现的全选和反选的基础代码示例。这段代码利用了jQuery的事件监听和属性操作功能来控制复选框的状态。当全选复选框被点击时，页面上所有具有相同name属性的复选框会被设置为选中或未选中...
首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行全部选中或全部取消时，这种功能特别实用，例如在数据筛选、表单提交等场景。插件通常通过监听复选框的变化，来控制...
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
在网页开发中，全选和反选功能是常见...总结来说，这个案例展示了如何使用HTML和jQuery实现全选/反选功能，以及如何处理用户交互。通过理解并实践这个例子，开发者可以更好地掌握网页中的动态交互设计，提高用户体验。
在本教程中，我们将探讨如何使用 jQuery 来实现多个下拉列表（select）的选择项展现，以及添加全选和反选功能。 首先，我们需要创建包含多个下拉列表的 HTML 结构。每个下拉列表可以使用 `<select>` 标签创建，而...