jQuery实现复选框全选、全不选、反选问题解析
今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，jquery 1.7.2之前支持attr对固有属性的操作，后面的版本只能用prop了。详细了解jQuery中attr()和prop()的区别，请点击参考。
下面贴上我的代码以供参考：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、全不选、反选</title>
<style type="text/css">
#choose input {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $choose = $("#choose input");
//全选
$("#all").click(function(){
$choose.each(function(){
$(this).prop("checked",true);
});
});
//全不选
$("#not").click(function(){
$choose.prop("checked",false);
});
//反选
$("#reverse").click(function(){
$choose.each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
});
</script>
</head>
<body>
<div id="box-function">
<input id="all" type="button" value="全选" />
<input id="not" type="button" value="全不选" />
<input id="reverse" type="button" value="反选" />
</div> <div id="choose">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
</html>
全文完，欢迎各位前辈批评指正！
jQuery实现复选框全选、全不选、反选问题解析的更多相关文章
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
- element-ui 里面el-checkbox多选框，实现全选单选
data里面定义了 data:[], actionids:[],//选择的那个actionid num1:0,//没选择的计数 num2:0,//选中的计数 ...
- layui 复选框checkbox 实现全选全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
- FineReport——JS二次开发（复选框全选）
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- jquery对复选框(checkbox)的操作（精华）
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...
随机推荐
- laravel框架查看执行过的sql语句
1.在routes.php中添加如下语句 Event::listen('illuminate.query', function($sql,$param) { file_put_contents ...
- 转FTP协议详解
转自:http://www.cnblogs.com/li0803/archive/2010/11/16/1878833.html FTP 是File Transfer Protocol(文件传输协议) ...
- usb转串口模块下载时遇到的问题
ch340g usb转TTL模块,烧写wifi模块ESP8266固件时,为图省事,我直接用的该模块的3.3v电为wifi模块供的电,结果刚一上电就出现串口模块消失(听到噔的一声),电脑设备管理器里就看 ...
- CQOI2016游记
前情提要:我是丝薄,noip405的丝薄,所以这次省选特别虚 day0 上午随便切了两个题.背了下版. 下午看考场,环境还好.键盘也不错.评測姬非常好,就是人和人之间有点近,我回去买了耳塞(尽管并没实 ...
- 浅谈Java中的System.gc()的工作原理
很多人把Java的“效率低下”归咎于不能自由管理内存,但我们也知道将内存管理封装起来的好处,这里就不赘述. Java中的内存分配是随着new一个新的对象来实现的,这个很简单,而且也还是有一些可以“改进 ...
- Servlet 国际化
在我们开始之前,先来看看三个重要术语: 国际化(i18n):这意味着一个网站提供了不同版本的翻译成访问者的语言或国籍的内容. 本地化(l10n):这意味着向网站添加资源,以使其适应特定的地理或文化区域 ...
- 创建一个视图JSP文件的helloWorld.jsp
让我们创建下面的JSP文件的helloWorld.jsp,在WebContent文件夹在你的eclipse项目.要做到这一点,右键单击WebContent文件夹中的项目资源管理器,然后选择“新建”&g ...
- 001windows已遇到一个关键性问题 一分钟后自动重启
重装了系统Window7,出现了如题的提示"windows已遇到一个关键性问题 一分钟后自动重启" 查找原因: 通过事件管理器可以查看如上提示遇到的问题.一般是因为一些系统的服务没 ...
- java字符编码详解
引用自:http://blog.csdn.net/jerry_bj/article/details/5714745 GBK.GB2312.iso-8859-1之间的区别 GB2312,由中华人民共和国 ...
- hibernate Session一级缓存 应该注意的地方
Session缓存 Hibernate的一级缓存是由Session提供的,因此它存在于Session的整个生命周期中,当程序调用save()/update()/saveOrupdate()/get() ...