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 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
php实现cookie加密的方法
2015/03/10 PHP
php中动态变量用法实例
2015/06/10 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
webpack4简单入门实例
2018/09/06 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
基于python实现学生信息管理系统
2019/11/22 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
python 图像增强算法实现详解
2021/01/24 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
学习标兵获奖感言
2014/02/20 职场文书
财务担保书范文
2014/04/02 职场文书
环卫工作个人总结
2015/03/04 职场文书
反腐倡廉观后感
2015/06/08 职场文书
政协常委会议主持词
2015/07/03 职场文书