复选框是网站开发的时候经常用到的网页标签之一，常见的在页面上对复选框的操作包括取值和修改复选框的状态。在jquery中，常见的操作标签的值得函数为attr，然而在操作复选框的时候，通常采用的却是prop，因为关于复选框的值，来自于properties而不是attributes。

　　举个例子：

　　以下代码是获取checkbox的值，并在控制台打印

　　

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         $(function () {

             $("#checkAll").click(function () {

                 console.log($(this).attr("checked"))

                 console.log($(this).prop("checked"))

             });

         });

     </script>

 </head>

 <body>

     <input type="checkbox" id="checkAll">全选<br/>

 </body>

 </html>

　　打印的结果如图，通过attr获取到的checkbox值为undefined，prop获取到的值为true

　　

　　如果将checkbox的默认值设置为checked

<input type="checkbox" id="checkAll" checked>全选<br/>

　　那么得到的结果，attr获得的结果永远是checked，而prop获得的结果则还是一个布尔值。

　　

　　会出现这样的情况，在于attributes和properties之间的差异，函数attr获取的值来自于attributes，然而当我们在控制台查看checkbox对象的时候会发现checked的值不是在attributes中，而是在properties。

　　

　　通过原生js的函数，我们也可以得出相同的结果。

console.log(document.getElementById("checkAll").getAttribute('checked'));

console.log(document.getElementById("checkAll").checked);//获取property 值

　　

　　所以，当我们对checkbox进行取值的时候，使用attr()函数获取到的值会是undefined，只能通过prop获取。

　　但是，当我们使用jquery对checkbox进行赋值的时候，使用 $("#checkAll").attr("checked",true);在IE下却是可以出现效果的。不过在谷歌浏览器下则会出现另一种情况。在谷歌浏览器下，第一次赋值能够产生效果，但是在进行第二次赋值的时候，你通过查看源代码，可以发现赋值虽然在标签处会产生效果，可是在谷歌浏览器里面是显示不出来的。

　　

　　

　　所以才会导致很多朋友在实现全选功能的时候用了attr之后，第一次全选可以实现，可是第二次全选却没办法实现的现象

　　综上所述，如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr.

　

jquery 使用attr() 函数对复选框无效的原因的更多相关文章

  1. jquery 使用attr() 函数对复选框无效的原因,javascript那些事儿——properties和attributes

    复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态.在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是pro ...

  2. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  3. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  4. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  5. jquery 1.9版本下复选框 全选/取消实现

    http://zhangzhaoaaa.iteye.com/blog/1914497 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran ...

  6. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. jQuery中prop()函数控制多选框(全选，反选)

    今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":ch ...

  8. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. jquery如何判断checkbox（复选框）是否被选中(转)

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

随机推荐

  1. linux下面安装配置mongoDB

    不知道为什么官网最新的2.4我一直解压失败 下载之前确认一下你的操作系统是64位的还是32位的对应去下载 64位链接:http://fastdl.mongodb.org/linux/mongodb-l ...

  2. 【Win32API】SendInput ERROR_BUSY 错误原因

    最近需要解决一个Windows上模拟键盘输入的问题, 使用SendInput这个API来实现的.当我从另外一台机器给当前机器发送一条键盘指令时,发现SendInput一直是成功的,但是没有看到任何输入 ...

  3. STM8S TIM4 初始化设置

    #define TIM4_DIV1 (unsigned char)0 #define TIM4_DIV2 (unsigned char)1 #define TIM4_DIV4 (unsigned ch ...

  4. SVN插件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  5. 从零开始学C++之构造函数与析构函数（二）：初始化列表（const和引用成员）、拷贝构造函数

    一.构造函数初始化列表 推荐在构造函数初始化列表中进行初始化 构造函数的执行分为两个阶段 初始化段 普通计算段 (一).对象成员及其初始化  C++ Code  1 2 3 4 5 6 7 8 9 1 ...

  6. spring mvc页面显示图片失败

    在配置文件中需要映射静态资源 <!-- 当在web.xml 中 DispatcherServlet使用 <url-pattern>/</url-pattern> 映射时, ...

  7. apns关于APP数字角标的理解

    前两天群里有兄弟在吐槽,做远程推送的时候:老板要求APP桌面图标的右上角显示红色未读数字(数字角标)要精准,有多少未读通知就显示数字几:但是后台的弟兄在发送推送通知的时候,每次的角标是1,然后要移动端 ...

  8. Ionic的项目结构-工程目录

    做前端的都应该知道一个框架  Ionic  这个是移动端webAPP最好用的吧(个人认为),那今天就来说说这个项目的结构以及文件的含义,希望对大家有所帮助 想看如何生成文件的话详细看我上篇博客 在用编 ...

  9. redis 学习笔记——数据同步、事务

    redis主从同步      redis支持简单易用的主从复制(master-slave replication)功能,该功能也是redis高可用性实现的基础.   redis复制原理      re ...

  10. Python json解析

    #encoding: utf-8 ''' Author:Siukwan ''' import sys reload(sys) sys.setdefaultencoding('utf8') import ...