$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

2022-12-31 11:28:10

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

<input type='checkbox' id='cb'/> 
<script> 
//获取是否选中 
var isChecked = $('#cb').attr('checked'); 
 
//设置选中 
$('#cb').attr('checked',true); 
</script> 
这样写在Jquery1.6之前完全没问题，可是当我们升级1.6到更高的版本时，问题就来了，此时我们会发现： 
$('#cb').attr('checked'); 返回的是chec
<input type='checkbox' id='cb'/> 
<script> 
//获取是否选中 
var isChecked = $('#cb').attr('checked'); 
 
//设置选中 
$('#cb').attr('checked',true); 
</script> 
这样写在Jquery1.6之前完全没问题，可是当我们升级1.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”等等。 
Jquery1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性
$("#cb").attr("tagName"); //undefined 
$("#cb").prop("tagName"); //INPUT 

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！

以下是官方建议attr(),prop()的使用：

分析了其中的原因，可以这样理解： 
它将“属性”与“特性”做了区别，属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。 
JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性

Attribute/Property .attr() .prop()
accesskey √  
align √  
async √ √
autofocus √ √
checked √ √
class √  
contenteditable √  
draggable √  
href √  
id √  
label √  
location ( i.e. window.location ) √ √
multiple √ √
readOnly √ √
rel √  
selected √ √
src √  
tabindex √  
title √  
type √  
width ( if needed over .width() ) √

按照下面為標準

最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。
下面根据这篇博文（javascript:mctmp(0);），简要翻译了.prop()和.attr()的用法：

1、从1.5.2升级到1.6.1

通过介绍新方法.prop()以及.attr()方法的改变，jQuery1.6.1引起了一场关于attributes和properties之间有何区别和联系的激烈讨论。同时，1.6.1也解决了一些向后兼容性问题。当从1.5.2升级到1.6.1时，你不必修改任何attribute代码。

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述，以及.attr()方法和.prop()方法的首选使用。然而，正如前面所述，jQuery1.6.1允许你使用.attr()方法就像以前它被使用在所有的情况中一样。

2、发生了什么变化

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。

特别提到的是，boolean attributes，比如：checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同。这意味着下面的代码：

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. $(“:checkbox”).attr(“checked”, true);
  2. $(“option”).attr(“selected”, true);
  3. $(“input”).attr(“readonly”, true);
  4. $(“input”).attr(“disabled”, true);
$(“:checkbox”).attr(“checked”, true);

$(“option”).attr(“selected”, true);

$(“input”).attr(“readonly”, true);

$(“input”).attr(“disabled”, true);

甚至是这样的代码：$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

在1.6.1中没有必要为了保持之前期望的运行结果而发生任何改变。

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些，下面是一些使用.attr()的例子，虽然在jQuery之前的版本中能正常工作，但是现在必须使用.prop（）方法代替：

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

首先，window或document中使用.attr()方法在jQuery1.6中不能正常运行，因为window和document中不能有attributes。它们包含properties(比如：location或readyState)，必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中，window和document中使用.attr()将被自动转成使用.prop，而不是抛出一个错误。

其次，checked,selected和前面提到的其它boolean attributes，因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上，一个attribute就是以下html中你看到的：$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. <input type=”checkbox” checked=”checked”>
<input type=”checkbox” checked=”checked”>

boolean attributes，比如：checked，仅被设置成默认值或初始值。在一个checkbox的元素中，checked attributes在页面加载的时候就被设置，而不管checkbox元素是否被选中。

properties就是浏览器用来记录当前值的东西。正常情况下，properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. $(“:checkbox”).get(0).checked = true;
  2. // Is the same as $(":checkbox:first").prop(“checked”, true);
$(“:checkbox”).get(0).checked = true;

// Is the same as $(":checkbox:first").prop(“checked”, true);

在jQuery1.6中，如果使用下面的方法设置checked：

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. $(“:checkbox”).attr(“checked”, true);
$(“:checkbox”).attr(“checked”, true);

将不会检查checkbox元素，因为它是需要被设置的property，但是你所有的设置都是初始值。

然而，曾经jQuery1.6被释放出来的时候，jQuery团队明白当浏览器仅关心页面加载时，设置一些值不是特别的有用。所以，为了保持向后兼容性和.attr()方法的有用性，我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly，但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表：$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

  1. autofocus, autoplay, async, checked, controls, defer, disabled,
  2. hidden, loop, multiple, open, readonly, required, scoped, selected
autofocus, autoplay, async, checked, controls, defer, disabled,

hidden, loop, multiple, open, readonly, required, scoped, selected

（译者注：大部分都是html5新增的属性）

还是建议使用.prop()方法来设置这些boolean attributes/properties，即使这些用例没有转换成使用.prop()方法，但是你的代码仍然可以在jQuery1.6.1中正常运行。

下面是一些attributes和properties的列表，正常情况下，应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法，但是.attr()方法可以运行在所有的attributes情况下。

注意：一些DOM元素的properties也被列在下面，但是仅运行在新的.prop()方法中

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

*例如: window.location
**如果需要在(if needed over) .width()

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行，就像1.6之前做的那样)

3、首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

上面的概述已经描述的够清楚了，我也没有必要再总结了。

另一個

<input id="cb2" type="checkbox" checked="checked" />

--------------------------------------------------------------

jquery判断checked的三种方法:

.attr('checked'):   //看版本1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:

// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});

//记得还有这种哦:$("#cb1").prop("checked","checked");

更多参考:http://api.jquery.com/prop/

上代码 大家可以随便测试:(你是懒人么-_-)

jquery1.6以后才支持prop的哦

新建一个text复制内容进去  后缀名改成html

$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法
<html>

    <head>

        <title>测试</title>

        <style type="text/css">

        </style>

        <!--1.62可以修改1.42  1.52  1.7来测试-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

        $(function(){

            //判断checked

　　　　　　 //    var a=$("#cb1").attr('checked'); //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false

　　　　　　 //    var b=$("#cb1").prop('checked'); //1.6+:true/false

　　　　　　 var c=$("#cb1").is(':checked');  //所有版本:true/false

　　　　　　 //    alert(a);

　　　　　 　//    alert(b);

            alert(c);

            //赋值   前两个所有的jquery版本都支持 prop只有jquery1.6+支持

　　　　　　 //    $("#cb1").attr("checked","checked");//1.5-

　　　　　　 //    $("#cb1").attr("checked",true);//1.5-
　　　　　　　//　　　$("#cb1").prop("checked","checked");//1.6+(整理的时候把这个忘记啦)
　　　　　　 //    $("#cb1").prop("checked",true);//1.6+

　　　　　　 //    $("#cb1").prop({checked:true});//1.6+

 　　　　　　//    $("#cb1").prop("checked",function(){

　　　　　　 //        return  true;//1.6+

　　　　　　 //    });

        })();

        </script>

    </head>

    <body>

        <!--赋值的时候记得去掉checked-->

    <input id="cb1" type="checkbox" checked />

    <input id="cb2" type="checkbox" checked="checked"/>

    </body>

</html>

以上內容全部為轉載

随机推荐

  1. sgu 240 Runaway （spfa）

    题意:N点M边的无向图,边上有线性不下降的温度,给固定入口S,有E个出口.逃出去,使最大承受温度最小.输出该温度,若该温度超过H,输出-1. 羞涩的题意 显然N*H的复杂度dp[n][h]表示到达n最 ...

  2. python 2&period;7 和3&period;0input区别

    name = raw_input('请输入用户名:')#python2.7的用法 name = input('请输入用户名:')#python3.0的用法 print(name)

  3. 上门洗车App 竟然是块大肥肉！

    http://www.leiphone.com/k-xiche-app-idea.html 打车App.租车App.防违规App我们见得多,但洗车App你一定没听过,之前在一次创业路演上碰到一个做上门 ...

  4. Java学习笔记--多线程

    rollenholt的博文:http://www.cnblogs.com/rollenholt/archive/2011/08/28/2156357.html 弹球例子: 0. 创建Bounce框架 ...

  5. keytool 错误：java&period;to&period;FileNotFoundException&colon;

    老是报如题的错误: 后来才知道是因为当前的目录下没有写的权限,所以需要指定一个路径来存放android.key: keytool -genkey -alias android.key -keyalg ...

  6. AOP面向切面编程C&num;实例

    原创: eleven 原文:https://mp.weixin.qq.com/s/8klfhCkagOxlF1R0qfZsgg [前言] AOP(Aspect-Oriented Programming ...

  7. Easyui datalist 使用记录

    仅简单记录下,资料相对比较少 官方给了一个很简单的例子,没啥用处,文档:http://www.jeasyui.com/documentation/datalist.php 学习要点: 1.追加行 $( ...

  8. Nginx使用教程&lpar;一&rpar;：下载并编译安装Nginx

    安装依赖 <br\>我们已经选择下载程序源代码进行手动编译,而不是使用软件包管理器(如Yum,Aptitude或Yast)进行安装. 这个选择有两个原因. 首先,软件包可能不包含在您的Li ...

  9. JAVA实现微信支付V3

    喜欢的朋友可以关注下,粉丝也缺. 相信很多的码友在项目中都需要接入微信支付,虽说微信支付已成为一个普遍的现象,但是接入的过程中难免会遇到各种各样的坑,这一点支付宝的SDK就做的很好,已经完成的都知道了 ...

  10. 查询SQlServer相同表结构差异

    USE [数据库名] GO ); ); ); ); SET @DataName1='库1'; SET @DataName2='库2'; SET @TableName1='表1'; SET @Table ...

上一篇：在Eclipse下搭建Hadoop开发环境


下一篇：checkbox的attr("checked")一直以来，undefined问题解决