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 import css实例代码
Jul 18 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
AngularJS折叠菜单实现方法示例
May 18 Javascript
vue实现微信分享功能
Nov 28 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于jquery的放大镜效果
2012/05/30 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
公司开除员工通知
2015/04/22 职场文书
书法社团活动总结
2015/05/07 职场文书
2015最新民情日记范文
2015/06/26 职场文书
小学语文教学随笔
2015/08/14 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript