Jquery attr("checked") 返回checked或undefined 获取选中失效

假设我们现在需要这样的场景:页面上有一个checkbox,我们期望通过Jquery来获得它是否选中,或者通过Jquery来让它被选中。
在JQ1.6之前的版本,我们会这样写我们的代码:


代码如下:

<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').attr('checked');

//设置选中
$('#cb').attr('checked',true);
</script>

这样写在JQ1.6之前完全没问题,可是当我们升级JQ1.6到更高的版本时,问题就来了,此时我们会发现:
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了。
并且checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。所以如果checkbox一开始是选中的,那么返回的是checked,如果一开始没被选中,则返回的是undefined。

解决的方法是:


代码如下:

<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//设置选中
$('#cb').prop('checked',true);
</script>

分析了其中的原因,可以这样理解:

它将“属性”与“特性”做了区别,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性


代码如下:

$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT

时间: 2013-10-07

jquery获取自定义属性(attr和prop)实例介绍

$("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

jquery 获取自定义属性(attr和prop)的实现代码

1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2. attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值.) 3. attr(属性名,函数值) //设置属性的函数值 (为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函数,由这个函数计算的值作为属性值.) 4.attr(properties) //给指定元素设置多个属性值

jQuery学习之prop和attr的区别示例介绍

1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使

jquery $(this).attr $(this).val方法使用介绍

$(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法 $(this).attr(key, value); 设置节点属性的值,相当于setAttribute(key,value)方法 eg:<div id="w_1" class="widget" diywidgetid="${template.diyWidgetId}"></div> var diywidgetid = $(

jQuery .attr()和.removeAttr()方法操作元素属性示例

今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

Jquery下attr和removeAttr的使用方法

下面我们来具体看一下attr的用法: 一.attr(name):取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined .其中name为string.下面我用一个img元素演示一下这种用法: 复制代码 代码如下: //html文件中 <img src="a.gif" /> //我们可以用attr获得img元素的src属性,具体用法如下: $(function(){ var imgSrc = $(

用JQuery 判断某个属性是否存在hasAttr的解决方法

在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断. 但是有时候我们需要判断别的属性,比如有的 a 链接包含 rel 属性,有的没有rel属性.这时该怎么判断呢? 这时就没有现成的方法了. 如果存在某个属性 $("#aid").at

jquery attr方法获取input的checked属性问题

问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase 复制代码 代码如下: <input type="checkbox" id="selectAll" onclick="checkAll()">全选 functi

jquery attr()设置和获取属性值实例教程

语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函

jquery中prop()方法和attr()方法的区别浅析

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un

jquery中live()方法和bind()方法区别分析

本文实例讲述了jquery中live()方法和bind()方法区别.分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的事件,而bind方法只有在第一次被加载的时候才绑定时间,如果代码之后再加载配对的元素,则不能绑定对应的事件 $("#manual_disconnect").live("click", function(){ connectionProfile("0"); }); $("

jQuery中hover方法和toggle方法使用指南

jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 参数:     over (Function) : 鼠标移到元素上要触发的函数.     out (Function): 鼠标移出元素要触发的函数. 复制代码

AngularJS中$apply方法和$watch方法用法总结

本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

js中scrollTop()方法和scroll()方法用法示例

本文实例讲述了js中scrollTop()方法和scroll()方法用法.分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div").scrollTop()://获得 scroll top offset 触发滚动事件 $(selector).scroll() 将函数绑定到滚动事件中: $(selector).scro

java 中newInstance()方法和new关键字的区别

java 中newInstance()方法和new关键字的区别 * 它们的区别在于创建对象的方式不一样,前者是使用类加载机制,后者是创建一个新类. * 那么为什么会有两种创建对象方式?这主要考虑到软件的可伸缩.可扩展和可重用等软件设计思想. * 我们使用关键字new创建一个类的时候,这个类可以没有被加载.但是使用newInstance()方法的时候, * 就必须保证:1.这个类已经加载:2.这个类已经连接了. * newInstance()实际上是把new这个方式分解为两步,即首先调用Class

基于js 各种排序方法和sort方法的区别(详解)

今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

fragment中的add和replace方法的区别浅析

使用 FragmentTransaction 的时候,它提供了这样两个方法,一个 add , 一个 replace ,对这两个方法的区别一直有点疑惑. 我觉得使用 add 的话,在按返回键应该是回退到上一个 Fragment,而使用 replace 的话,那个别 replace 的就已经不存在了,所以就不会回退了.但事实不是这样子的.add 和 replace 影响的只是界面,而控制回退的,是事务. public abstract FragmentTransaction add (int con

区分ASP.NET中get方法和post方法

在网页设计中,无论是动态还是静态,get方法是默认的,它在URL地址长度是有限的,所以get请求方法能传送的数据也是有限的,一般get方法能传递256字节的数据,当get请求方法传递的数据长度不能满足需求时,就需要采用另一种请求方法post,post方法可传递的数据最大值为2mb相应地,读取post方法传递过来的数据时,需要采用form方法来获取:post方法在aspx页面执行时,地址栏看不到传送过来的参数数据,更加有利于页面的安全,所以一般情况采用post方法传送页面数据. 这里举个简单的例子

关于Object中equals方法和hashCode方法判断的分析

首先提出这样一个问题: 如果两个对象不相同,他们的hashCode值一定不相等吗? 我们都知道equals和hashCode是Object中的方法,java中每一个对象都具有这两个方法. equals(Object obj):判断两个对象是否"相同",返回true或false: public boolean equals(Object obj) { return (this == obj); } hashCode():将该对象的内部地址作为一个int值返回 public native