<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(function () {
/*全选功能的实现*/
$("#all").click(function () {
$(".item").attr("checked", $("#all").prop("checked"));
});
/*当checkbox全部被选中时，全选被勾选，否则不配勾选*/
$(".item").click(function () {
if ($("input[class='item']:checked").size() == 7) {
$("#all").attr("checked", true);
} else {
$("#all").attr("checked", false);
}
});
/*反选功能的实现*/
$("#ops").click(function () {
$(".item").each(function () {
$(this).attr("checked", !this.checked);
});
});
});
</script>
</head>
<body>
<label>全选</label><input type="checkbox" id="all" /><br />
<label>反选</label><input type="checkbox" id="ops" /><br />
<label>1,</label><input type="checkbox" class="item" /><br />
<label>2,</label><input type="checkbox" class="item" /><br />
<label>3,</label><input type="checkbox" class="item" /><br />
<label>4,</label><input type="checkbox" class="item" /><br />
<label>5,</label><input type="checkbox" class="item" /><br />
<label>6,</label><input type="checkbox" class="item" /><br />
<label>7,</label><input type="checkbox" class="item" /><br />
</body>
</html>
分享到：
相关推荐
demo46-jQuery全选，反选，取消选择.html
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
### 一、jQuery全选 全选功能通常应用于多选列表或表格中，允许用户一次性选择所有选项。在jQuery中，我们可以通过`$("selector").attr("checked", true)`来实现。这里的`selector`是用于选择你想要设置为选中的...
页面上通过一个checkbox实现全选与反选
很好用的使用jquery来实现的通用的全选反选功能
使用jquery实现 checkbox的 全选，反选
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
本篇文章将详细讲解如何利用jQuery实现全选、反选功能，并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先，让我们理解全选和反选的基本概念。全选意味着选定所有可选项，而...
<title>jQuery全选/反选示例 <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 全选" id="ckAll"/>水果 苹果" id="apple"/>苹果 香蕉" id="bann"/>香蕉 橘子" id="origin"/>...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
本主题将深入探讨jQuery中的"全选"与"反选"功能，这是一个常见且实用的功能，尤其是在处理多选框（Checkbox）的场景中。 全选与反选功能在用户界面设计中十分常见，例如在批量选择数据项、同意服务条款或选择订阅...
反选功能与全选类似，但它的目的是取消所有已选中的复选框。以下是一个反选的JavaScript示例： ```javascript function deselectAll() { var checkboxes = document.getElementsByName('checkboxName'); for (var...
这个压缩包文件"checkbox使用jquery全选-反选-取得选中的值"中应该包含了完整的HTML、CSS和JavaScript代码示例，你可以下载并运行以更好地理解和实践这些功能。通过学习和掌握这些技术，你可以轻松地在项目中实现复...
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
jquery实现全选反选功能，代码可以直接使用，可应用于实际项目当中。
"Jquery全选反选Checkbox"是一个常见的功能需求，特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件，让用户能够快速地对一组复选框进行全选或反选操作。 首先...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...