守望麦香花开
- 浏览: 49308 次
-
文章分类
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全选，不全选，反选</title>
<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#selectAll").click(function () {//全选
$("#playList :checkbox").attr("checked", true);
});
$("#unSelect").click(function () {//全不选
$("#playList :checkbox").attr("checked", false);
});
$("#reverse").click(function () {//反选
$("#playList :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="playList">
<input type="checkbox" value="歌曲1" />歌曲1<br />
<input type="checkbox" value="歌曲2" />歌曲2<br />
<input type="checkbox" value="歌曲3" />歌曲3<br />
<input type="checkbox" value="歌曲4" />歌曲4<br />
<input type="checkbox" value="歌曲5" />歌曲5<br />
<input type="checkbox" value="歌曲6" />歌曲6
</div>
<input type="button" value="全选" id="selectAll" />
<input type="button" value="全不选" id="unSelect" />
<input type="button" value="反选" id="reverse" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全选，不全选，反选</title>
<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#selectAll").click(function () {//全选
$("#playList :checkbox").attr("checked", true);
});
$("#unSelect").click(function () {//全不选
$("#playList :checkbox").attr("checked", false);
});
$("#reverse").click(function () {//反选
$("#playList :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="playList">
<input type="checkbox" value="歌曲1" />歌曲1<br />
<input type="checkbox" value="歌曲2" />歌曲2<br />
<input type="checkbox" value="歌曲3" />歌曲3<br />
<input type="checkbox" value="歌曲4" />歌曲4<br />
<input type="checkbox" value="歌曲5" />歌曲5<br />
<input type="checkbox" value="歌曲6" />歌曲6
</div>
<input type="button" value="全选" id="selectAll" />
<input type="button" value="全不选" id="unSelect" />
<input type="button" value="反选" id="reverse" />
</body>
</html>
分享到：
发表评论
-
validate自动校验
2016-09-23 15:32 1064<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 495jQuery 的选择器可谓之强 ... -
网页选项卡的切换
2016-09-22 10:53 443<!DOCTYPE html> <html& ... -
JQuery的extend扩展
2016-09-18 15:23 429JQuery的extend扩展方法： Jquery ... -
jquery实现全选，全不选，反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 497var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1916jquery对对象数组的遍历的两种方式 data: [ { ... -
query，bootstrap在开发中使用的总结
2016-08-24 09:50 603当ajax请求返回的数据date如上面所显示，要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 785select 初始化值，option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值，option 的value是id,内容 ... -
bootstrap日期插件daterangepicker的使用
2016-08-22 10:59 915今天用的了bootstrap日期插件感觉搜索的资料不是很多在此 ... -
Jquery选择器
2016-08-19 10:08 650JQuery: 一：入门 二：选择器 三：DOM操作 四：事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 545Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 426在www.json.org上公布了很多JAVA下的json ... -
HTML5时钟
2016-08-18 12:31 513本示例使用HTML5的canvas标签和Javascript脚 ... -
同步更新input中的内容
2016-08-16 14:15 531HTML： <div class="form ... -
JQuery验证
2016-08-16 09:46 515js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 497一、用前必备 转载：http://www.cnblogs.c ...
相关推荐
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中...
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
很好用的使用jquery来实现的通用的全选反选功能
使用Jquery编写的全选全不选反选功能，代码简洁，通俗易懂。。。
在这个场景中，我们关注的是如何利用jQuery来实现全选、取消选择、反选的功能，以及如何实现元素的拖拽效果。以下是关于这些功能的详细解释： **全选、取消和反选功能**： 1. **全选**：这个功能允许用户一键选中...
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
在IT领域，尤其是在网页开发中，...总结来说，"全选、全不选、反选"是提高用户在网页上操作复选框效率的重要功能，使用jQuery可以方便地实现这些功能。在实际项目中，理解并熟练运用这些方法对于提升用户体验至关重要。
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下: $(function(){ $(“#checkedAll”).click(function(){ $(‘[name=items]:checkbox’)...
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
在网页开发中，jQuery 是一个广泛使用...通过以上介绍，我们可以利用 jQuery 实现复选框的全选、反选和全不选功能，同时结合表单验证插件，确保用户按照规定进行输入。在实际应用中，可以根据具体需求进行调整和优化。
使用jQuery处理复选框可以非常方便地实现全选、全不选、反选等操作。以下是对上述文档中关于复选框全选全不选反选操作的知识点的详细解读。 ### HTML代码结构 文档中给出了一个复选框列表的HTML结构，包括几个选项...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
如果这是一个源码文件，那么它应该包含了上述提到的jQuery实现的复选框全选反选功能的完整代码。 总结起来，这个基于jQuery的全选、反选复选框插件源码例子涉及到了jQuery的选择器、属性操作、事件处理、可能还有...
以上就是使用jQuery实现全选、不选和反选功能的基本步骤。在实际项目中，你可能需要根据具体需求进行调整，例如增加对分页或动态加载数据的支持。同时，为了提高性能，可以考虑使用事件委托，避免为每个复选框单独...
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改