【jQuery】对于复选框操作的attr与prop
这个是在jQuery1.6版本号之后出现的鬼东西。受影响的主要有下拉列表select与复选框checkbox。众所周知。在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是这样了,比方我要取出其是否被选中的属性checked,attr("checked")去取没有选中的复选框是undefinded的。仅仅能取出被选中复选框的属性。这个问题,导致我在一个条件推断中忙活了比較久的事件。查了一下发现,在jQuery1.6版本号之后,你取复选框有没有被选中,要用prop
举个样例还说明这个问题,例如以下代码。设置两行全然一模一样的东西,两button对一复选框进行操作,一个行内文本,用来显示Jquery的属性,唯一不同的是一个用了attr属性,一个用了prop属性:
<!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>attr与prop</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
attr:
<button id="selected1"/>选中复选框 </button>
<button id="unselected1"/>不选中复选框 </button>
<input type="checkbox" id="checkBox1" />
<span id="tip1"></span><br/>
prop:
<button id="selected2"/>选中复选框 </button>
<button id="unselected2"/>不选中复选框 </button>
<input type="checkbox" id="checkBox2" />
<span id="tip2"></span><br/>
</body>
</html>
<script type="text/javascript">
$("#selected1").click(function(){
$("#checkBox1").attr("checked",true);
$("#tip1").html($("#checkBox1").attr("checked"));
});
$("#unselected1").click(function(){
$("#checkBox1").attr("checked",false);
$("#tip1").html($("#checkBox1").attr("checked"));
});
$("#selected2").click(function(){
$("#checkBox2").prop("checked",true);
$("#tip2").html($("#checkBox2").prop("checked"));
});
$("#unselected2").click(function(){
$("#checkBox2").prop("checked",false);
$("#tip2").html($("#checkBox2").prop("checked"));
});
</script>
执行效果却得到例如以下所看到的。极其令人吃惊的是,尽管相同可以改变复选框的值,使用attr方法去操作的复选框的第一行。其值一直没有改变。
不管选中还是没有选中一直是checked的状态,而第二行使用了prop,选中是true,没选中是没有选中的undefinded。这才干真正用于if条件的推断。使用attr取复选框是否被选中,放到if中,仅仅会对头两次选择有效,之后就失效了。因此,以后再jQuery搞复选框,没什么事还是用prop。
jQuery你丫为何各个版本号的代码会不同呢?为何不能像Javascript一样,能取就能改呢?
【jQuery】对于复选框操作的attr与prop的更多相关文章
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格
1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- jquery实现复选框全选,全不选,反选中的问题
今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- jquery判断复选框是否选中
jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...
- python之tkinter使用-复选框操作
# tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口 ...
随机推荐
- 安装eclipse maven插件m2eclipse No repository found containing
m2eclipse插件是Eclipse的一款Maven插件. 安装m2eclipse插件的步骤例如以下: 启动Eclipse,在菜单条中选择Help,然后选择Install New Software- ...
- luogu1072 Hankson的趣味题
题目大意 给出数a0, a1, b0, b1,求满足gcd(a0, x)=a1, lcm(b0, x)=b1的x的个数 解法一 枚举b1的因数,看看是否满足上述条件. 怎样枚举因数 试除法.对于1~s ...
- 使用register_chrdev注册字符设备
1.2.2 使用register_chrdev注册字符设备 注册字符设备可以使用register_chrdev函数. int register_chrdev (unsigned int major, ...
- 各种编程语言功能综合简要介绍(C,C++,JAVA,PHP,PYTHON,易语言)
各种编程语言功能综合简要介绍(C,C++,JAVA,PHP,PYTHON,易语言) 总结 a.一个语言或者一个东西能火是和这种语言进入某一子行业的契机有关.也就是说这个语言有没有解决社会急需的问题. ...
- xenserver 增加新硬盘
xenserver 增加新硬盘 1.XS创建本地存储 首先 分区好的的硬盘接到服务器上 查看所有硬盘了的id ls -l /dev/disk/by-id/ 记下硬盘的全称.接下来开始挂载 xe sr ...
- 09-JavaScript高级
今日知识 1. Dom(文档对象模型) 2. Bom(浏览器对象模型) 3. 总结 Dom 1. 获取id为div1的元素对象. * var result=document.getElementByI ...
- SQL查询中选取某个字段的前几个字符的方法
在统计某种数据名称是否存在规律时,可以通过group by进行统计,但是有时候存在钱几个字符相同,后面字符不同的情形.这样可以通过按照前几个字符串进行统计,SqlServer和Oracle中都可以使用 ...
- 洛谷P2607 [ZJOI2008]骑士(树形dp)
题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里, ...
- SVN添加分支
1.打开版本库浏览视图 2.复制当前版本 3.输入复制的目的目录即可
- 00-- 关于C++ const 的全面总结
转:关于C++ const 的全面总结 C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根据各方面查到的资料进行总结如下,期望对朋友们有所帮助. Const 是C ...