【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') # 设置窗口 ...
随机推荐
- 【移动开发】布局优化利器<include/>和ViewStub
本文翻译自<50 android hacks> 当创建复杂的布局的时候.有时候会发现加入了非常多的ViewGroup和View.随之而来的问题是View树的层次越来越深,应用也变的越来越慢 ...
- laravel接口设计
在各种公共方法都设计好,软件安装成功的条件下 routes/web.php中路由信息如下 <?php /* |------------------------------------------ ...
- android 添加新的键值,自定义按键-2【转】
本文转载自:http://blog.csdn.net/mr_raptor/article/details/8053871 在Android中,上层可使用的键值默认情况下是92个,从0-91:一般情况下 ...
- EOJ 2822 内存显示
一个 int 类型变量或 double 类型变量在连续几个字节的内存中存放.读取数值时,当数值中包含小数点时类型为 double,否则类型为 int.将读入的数值存放在 int 类型变量或 doubl ...
- html转义字符换行以及回车等的使用
欢迎加入前端交流群交流知识&&获取视频资料:749539640 html换行回车转义字符 换行Line feed 回车Carriage Return html中换行转义字符 的使 ...
- NOIP2012 D2 T2 借教室 线段树 OR 二分法
题目描述: 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自 ...
- Solr.NET快速入门(七)【覆盖默认映射器,NHibernate集成】
覆盖默认映射器 默认情况下,SolrNet使用属性映射Solr字段. 但是,您可能需要使用另一个映射程序. 替换默认映射器取决于您如何设置库: 内置容器 如果使用默认的内置容器,可以在调用Startu ...
- 移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~
在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...
- 错误:android.util.SuperNotCalledException
android.util.SuperNotCalledException: Activity {…….YouTubePlayActivity} did not call through to supe ...
- MySQL 5.6 Reference Manual-14.7 InnoDB Table Compression
14.7 InnoDB Table Compression 14.7.1 Overview of Table Compression 14.7.2 Enabling Compression for a ...