<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JQ 全选和反选和取消</title>
</head>
<body>
<table border="1" style="margin:20px auto;">
<tr><th>选择</th><th>姓名</th></tr>
<tr><td><input type="checkbox" /></td><td>吴者然</td></tr>
<tr><td><input type="checkbox" /></td><td>景临境</td></tr>
<tr><td><input type="checkbox" /></td><td>暴天明</td></tr>
<tr><td><input type="checkbox" /></td><td>落月清</td></tr>
<tr>
<td colspan="2">
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseAll()">
<input type="button" value="取消" onclick="cancleAll()">
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function checkAll(){
$(':checkbox').prop('checked',true);
}
function cancleAll() {
$(':checkbox').prop('checked',false);
}
function reverseAll(){
$(':checkbox').each(function(){
var v = $(this).prop('checked')? false:true;
$(this).prop('checked',v)
})
}
</script>
</body>
</html>
效果图：
相关推荐
### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中，复选框（checkbox）是常用的一种交互元素，特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...
在这个项目中，我们关注的是使用jQuery来实现一些特定的功能，这些功能包括复选框的操作（全选、反选、取消选择）以及购物车中的商品价格统计。 首先，让我们深入了解一下复选框的操作。在HTML中，复选框是通过`...
"JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...
以上就是使用jQuery实现全选反选和批量删除功能的基本步骤和关键知识点。通过理解并掌握这些，你可以轻松地为你的Web应用增加此类交互功能。在实践中，还可以考虑优化用户体验，例如添加进度条显示批量操作的状态，...
2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check
2. checkbox全选和反选是web开发中常见的功能，一般用于多选项列表，允许用户选择全部项目或取消选择所有项目。 3. 实现全选和反选的基本原理是：获取所有checkbox的DOM对象，并通过循环设置它们的checked属性为true...
在本文中，我们将深入探讨如何使用jQuery实现全选和反选功能，这通常在具有复选框列表的网页中非常有用。例如，在一个表格中，用户可能需要一次性选择或取消选择所有行。以下是一个简单的示例，展示了如何通过jQuery...
标题“JQ最少代码实现全选和不全选”涉及到的是如何使用jQuery来控制多选框（checkboxes）的全选与反选功能。这种功能常见于数据管理界面，用户可以快速选择或取消选择所有项目。下面将详细解释这一知识点。 一、...
总结来说，这个实例展示了如何使用 jQuery 和 CSS 实现表格的交互功能，包括单击行改变背景色以及全选/反选功能。这在数据展示和管理的网页应用中非常常见，可以提升用户体验。开发者可以通过理解这些代码，进一步...
`<input type="checkbox" id="allChecked">`、`<input type="checkbox" id="invertChecked">`和`<input type="checkbox" id="orChecked">`是控制全选、反选和一键切换的复选框。 6. **JavaScript事件**： 使用`....
总结来说，JQuery实现列表中复选框全选反选功能封装是一个很好的实践，它展示了如何利用JQuery操作DOM和事件监听的能力来实现高效和用户友好的界面交互。通过合理使用自定义属性和选择器，可以显著降低HTML结构和...
在JavaScript和jQuery中，全选/反选功能是常见的需求，尤其在表格或者多选项列表中。当用户点击一个主控按钮（如“全选”）时，希望所有子选项都能随之被选中或取消选中。然而，在实际开发过程中，可能会遇到全选/...
根据提供的文件信息，我们可以了解到这篇文档主要介绍了使用jQuery库（版本1.3.2）来实现一个全选与反选的功能，即通过点击一个按钮或者执行一段脚本来选中或取消选中表单中的所有复选框。在此基础上，我们可以总结...
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
在前端开发中，全选、反选和不选功能是十分常见的需求，尤其是在处理批量操作如删除、修改状态等场景时。为了实现这些功能，JQuery作为一门强大的JavaScript库，提供了非常便捷的DOM操作和事件处理能力。本文将详细...
jQuery提供了强大的DOM操作和事件处理能力，使得实现复选框的全选、反选和批量删除等功能变得非常简单。通过合理组织和封装代码，可以提高代码的可维护性和复用性，使你的网页应用更加高效和灵活。
在这个“jQuery图片列表全选反选代码”的主题中，我们将深入探讨如何利用jQuery实现一个手机端的图片列表，具备全选、反选和删除功能。 首先，我们需要了解jQuery的选择器和事件绑定。在图片列表中，每个图片项通常...
在许多场景下，我们可能需要处理复选框（checkbox）的选择状态，例如实现全选和反选的功能。这里我们将详细讲解如何使用 jQuery 和 JavaScript 实现这一目标。 首先，我们来看全选功能的实现。在给定的代码中，有一...
但你可以为用户提供一个“反选”按钮，或者在全选后反转所有选择。这可以通过监听子复选框的`change`事件，然后检查所有子复选框是否都已选中来实现。如果它们都选中，那么设置主复选框为选中状态；如果至少有一个未...