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" ...
随机推荐
- asp.net 表单数据提交，常见方式与错误总结
在ASP中,我们通常把表单提交到另外一个页面(接受数据页面).但是在ASP.NET中,服务端表单通常都是提交到本页面的,如果我设置 form1.action="test.aspx" ...
- ie6、ie7下JSON.parse JSON未定义的解决方法
解决方法一: var jsons = req.responseText; var s; if (typeof(JSON) == 'undefined'){ s = eval("(" ...
- leetcode_Power of Two_easy
Given an integer, write a function to determine if it is a power of two. 题目意思:推断某个数是否是2的幂. 方法:直接进行bi ...
- 转：关于安卓多线程while(true)方法占用CPU高的原因及其解决方法
由于项目需要用到安卓多线程操作,结果开了四条线程,下载到平板一直很卡,CPU占用率暴涨.于是开始查找原因,发现是线程run()方法里的while(true)导致的, 下图是为解决时开启一条while( ...
- oracle的一些问题
好久时间没有用oracle,这次因为有个项目的需要,又重新温习了一下oracle. 我使用的oracle的版本是windows oracle 11g_R2. 首先先说一下安装.这个没有太大的问题,主要 ...
- 深入剖析tomcat的类加载机制
1JVM类加载机制 JVM的ClassLoader通过Parent属性定义父子关系,可以形成树状结构.其中引导类.扩展类.系统类三个加载器是JVM内置的. 它们的作用分别是: 1)引导类加载器:使用n ...
- HashMap之原理及死锁
一.HashMap原理 1.HashMap的本质就是数组和链表.table是一个entry数组,每一个数组元素保存一个Entry节点,而Entry节点内部又连接着同样key的下一个Entry节点,就构 ...
- 22lvs 健康节点检查
[root@lb03 scripts]# cat lvm_health_check.sh #!/bin/bash web_ip=( 10.0.0.17 10.0.0.18 ) # 检查恢复就添加节点 ...
- 基于 UML 的业务建模举例
简介: 对于管理流程咨询项目.大型信息化建设项目和套装管理软件实施项目,对业务环境的分析和理解对项目的成功至关重要.系统.全面理解 IT 系统所处的业务环境,可以帮助 IT 系统能提供正确系统功能,并 ...
- python django -4 模板
模板介绍 作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视 ...