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


Posted in Javascript onMay 26, 2014

问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别:

1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase

<input type="checkbox" id="selectAll" onclick="checkAll()">全选 
function checkAll() 
{ 
var checkedOfAll=$("#selectAll").prop("checked"); 
alert(checkedOfAll); 
$("input[name='procheck']").prop("checked", checkedOfAll); 
}

2.如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$("#selectAll").attr("checked")都会返回undefined;
<input type="checkbox" id="selectAll" onclick="checkAll()" >全选

如果当前input中初始化已定义checked属性,则不管是否选中,$("#selectAll").attr("checked")都会返回checked.
<input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选 
function checkAll() 
{ 
var checkedOfAll=$("#selectAll").attr("checked"); 
alert(checkedOfAll); 
$("input[name='procheck']").attr("checked", checkedOfAll); 
}

总结,如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.
Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js实现拖动缓动效果
Jan 13 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
微信小程序反编译的实现
Dec 10 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 #Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 #Javascript
js处理表格对table进行修饰
May 26 #Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
React Native实现地址挑选器功能
2017/10/24 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
python聊天程序实例代码分享
2013/11/18 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python 错误和异常代码详解
2018/01/29 Python
Django实现内容缓存实例方法
2020/06/30 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
2014年情人节活动方案
2014/02/16 职场文书
小学生手册家长评语
2014/04/16 职场文书
新闻传播专业求职信
2014/07/22 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
学生安全责任协议书
2016/03/22 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
Python开发五子棋小游戏
2022/04/28 Python