<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<script language="JavaScript">
$(document).ready(function() {
//<input type="button" id="CheckedAll" value="全 选"/>
$("#CheckedAll").click(function() {
$("input[name=items]").attr("checked","checked");
});
//<input type="button" id="CheckedNo" value="全不选"/>
$("#CheckedNo").click(function() {
$("input[name=items]").attr("checked",null);
});
//<input type="button" id="CheckedRev" value="反 选"/>
$("#CheckedRev").click(function() {
$("input[name=items]").each(function(index, domEle) {
if(domEle.checked) {
$(domEle).attr("checked",null);
} else {
$(domEle).attr("checked","checked");
}
});
});
//<input type="checkbox" id="checkedAll_2"/>全选/全不选
$("#checkedAll_2").click(function() {
if(this.checked) {
$("input[name=items]").attr("checked","checked");
} else {
$("input[name=items]").attr("checked",null);
}
});
});
</script>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
</form>
</body>
</html>
分享到：
相关推荐
页面上通过一个checkbox实现全选与反选
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
3. **全选和反选实现** - **全选Checkbox**：通常位于表格上方，当用户勾选此Checkbox时，所有行的Checkbox会被设置为选中状态。这可以通过监听全选Checkbox的`CheckedChanged`事件来实现，然后遍历DataGridView的...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能，以及如何进行表单验证。 1. **全选功能** 要实现全选功能，首先我们需要一个主复选框...
jquery实现checkbox全选、反选、全部选，很不错的资源，欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...
在提供的文件“js实现checkbox全选，反选，全不选.htm”中，应当包含了上述功能的具体实现。通过查看源码，我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例，帮助我们更好地...
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
首先，`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框操作。当用户点击表格的行时，行内的复选框会被选中或取消选中，同时该行会呈现出高亮状态，以提供清晰的视觉反馈。这种功能在数据管理和筛选场景中...
首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行全部选中或全部取消时，这种功能特别实用，例如在数据筛选、表单提交等场景。插件通常通过监听复选框的变化，来控制...
在网页开发中，全选和反选功能是常见...总结来说，这个案例展示了如何使用HTML和jQuery实现全选/反选功能，以及如何处理用户交互。通过理解并实践这个例子，开发者可以更好地掌握网页中的动态交互设计，提高用户体验。
总结来说，"Jquery全选反选Checkbox"是一个提高用户体验的实用功能，通过jQuery的DOM操作和事件处理，我们可以轻松实现全选和反选的效果。而提供的压缩包资源则提供了具体的实现代码，便于开发者学习和使用。
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
知识点一：Jquery基础 ...通过这篇文章，我们可以了解到Jquery的基本使用方法，以及如何使用Jquery来实现checkbox的全选和反选功能。虽然文章作者提到这个示例可能存在一些bug，但这并不影响我们从中学到的知识。
接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来实现全选/反选功能。这里我们使用jQuery： ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...
本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能，它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用，例如在用户需要批量操作表格项时。 1. **...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
总结一下，通过jQuery，我们可以轻松地实现Checkbox的全选和反选功能，提高用户体验。这个功能对于任何需要批量操作的Web应用来说都是不可或缺的。在实际项目中，你可能需要根据具体需求对其进行调整，比如添加动画...
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
在这个例子中，我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先，我们需要引入jQuery库。在HTML代码中，可以看到引入了`jquery-1.4.2.min.js`文件，这是jQuery的核心库： ```html ...