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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
BootStrap selectpicker
Jun 20 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 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
php表单提交问题的解决方法
2011/04/12 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript 闭包详解
2015/07/02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python交易记录整合交易类详解
2019/07/03 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
安全生产标语
2014/06/06 职场文书
2014年营业员工作总结
2014/11/18 职场文书
大学生创业事迹材料
2014/12/30 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
好人好事新闻稿
2015/07/17 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
python实现双链表
2022/05/25 Python