jquery 使用attr() 函数对复选框无效的原因
复选框是网站开发的时候经常用到的网页标签之一，常见的在页面上对复选框的操作包括取值和修改复选框的状态。在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() 函数对复选框无效的原因的更多相关文章
- jquery 使用attr() 函数对复选框无效的原因,javascript那些事儿——properties和attributes
复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态.在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是pro ...
- jQuery分别获取选中的复选框值
function jqchk(){ //jquery获取复选框值 var s=''; $('input[name="aihao"]:checked').each(func ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
- jquery 1.9版本下复选框 全选/取消实现
http://zhangzhaoaaa.iteye.com/blog/1914497 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran ...
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery中prop()函数控制多选框(全选，反选)
今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":ch ...
- Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jquery如何判断checkbox（复选框）是否被选中(转)
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
随机推荐
- fancybox关闭弹出窗口parent.$.fancybox.close();
fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent. ...
- Python之FTP多线程下载文件之分块多线程文件合并
Python之FTP多线程下载文件之分块多线程文件合并 欢迎大家阅读Python之FTP多线程下载系列之二:Python之FTP多线程下载文件之分块多线程文件合并,本系列的第一篇:Python之FTP ...
- Asp.Net MVC 进阶篇：路由匹配 实现博客路径 和文章路径
Asp.Net MVC 进阶篇:路由匹配 实现博客路径 和文章路径 我们要实现 通过路由 匹配出 博客地址 和博客文章地址 例如下面的这两个地址 //http://www.cnblogs.com/ma ...
- CKEditor4.x部署和配置
CKEditor4.x && JSP 官网下载CKEditor,可选Basic, Standard, Full 解压放置其WebRoot下 JSP中引入以下文件: <script ...
- 使用 NPC，NPCManager 在 XNA 中创建 NPC
使用 NPC,NPCManager 在 XNA 中创建 NPC 平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐 ...
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- LINQ to XML LINQ学习第一篇
LINQ to XML LINQ学习第一篇 1.LINQ to XML类 以下的代码演示了如何使用LINQ to XML来快速创建一个xml: public static void CreateDoc ...
- 在路由器上搭建SVN服务器
在路由器上搭建SVN服务器 SVN托管服务大家都不陌生了,我最早开始用的是谷歌提供的SVN,因为在上面托管的项目都是开源的,所以当有些项目不方便在网上公开的时候,就需要自己搭建SVN服务器了.wind ...
- 浅谈一下SSI+Oracle框架的整合搭建
浅谈一下SSI+Oracle框架的整合搭建 最近换了一家公司,公司几乎所有的项目都采用的是Struts2+Spring+Ibatis+Oracle的架构,上一个东家一般用的就是JSF+Spring,所 ...
- python schedule processor
run some tasks which could look like CRON within linux/UNIX in python. Here's a demo which run on ub ...