复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态。在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. 支持异步同步的分布式CommandBus MSMQ实现

    支持异步同步的分布式CommandBus MSMQ实现 先上一张本文所描述的适用场景图 分布式场景,共3台server: 前端Server Order App Server Warehouse App ...

  2. ASP.NET MVC 之View

    仅此一文让你明白ASP.NET MVC 之View的显示(仅此一文系列二)   题外话 一周之前写的<仅此一文让你明白ASP.NET MVC原理>受到了广大学习ASP.NET MVC同学的 ...

  3. HTML + Javascript开发AIR应用

    HTML + Javascript开发AIR应用 目录 背景什么是AIR?环境准备运行效果开发过程目录结构应用程序描述符HTML页面调试备注 背景返回目录 断断续续用Winform和WPF开发过一些小 ...

  4. CNN for Visual Recognition (01)

    CS231n: Convolutional Neural Networks for Visual Recognitionhttp://vision.stanford.edu/teaching/cs23 ...

  5. [Windows Azure] 使用 Windows Azure 快速搭建 Redis 服务器

    [Windows Azure] 使用 Windows Azure 快速搭建 Redis 服务器   Redis相信玩开源,大数据的朋友们并不陌生,大家最熟悉的使用者就是新浪微博,微博的整体数据缓存都是 ...

  6. Java笔记:枚举类

    1.一个类的实例是有限且固定的,这个类称为枚举类.比如季节类,只有四个对象(春.夏.秋.冬) 2.手动实现一个枚举类(1)通过private将构造器隐藏起来(2)把这个类的所有可能实例都使用priva ...

  7. ajax获取后台传递的json数据

      最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...

  8. Python基础1-变量、运算符、表达式

    一.Python的安装 1.下载python安装包https://www.python.org/ 2.选择对应的Python版本(Windows下) 3.装完之后打开电脑的cmd,验证一下安装是否成功 ...

  9. java单词表01

    OO:object-oriented,面向对象OOP:object-orientedprogramming面向对象编程 JDK:Javadevelopmentkit,java开发工具包JVM:java ...

  10. openstack私有云布署实践【9.1 Glance镜像管理(科兴环境)】

    首先登录kxcontroller1创建kx_glance数据库,并赋于远程和本地访问的权限.      mysql -u root -p   CREATE DATABASE kx_glance; GR ...