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的执行顺序 之实战篇
Mar 03 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
附件名前加网站名
2008/03/23 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
python 正则式使用心得
2009/05/07 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python基本语法经典教程
2016/03/11 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python3爬取各类天气信息
2018/02/24 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
如何设置Java的运行环境
2013/04/05 面试题
个人担保书格式范文
2014/05/12 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
公司市场部岗位职责
2015/04/15 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
投诉信格式范文
2015/07/02 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
使用CSS实现音波加载效果
2023/05/07 HTML / CSS