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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
不错的JS中变量相关的细节分析
Aug 13 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
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核心代码分析require和include的区别
2011/01/02 PHP
PHP编写RESTful接口
2016/02/23 PHP
初识ThinkPHP控制器
2016/04/07 PHP
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
投标承诺书范本
2014/03/27 职场文书
安全生产管理责任书
2014/04/16 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
感恩主题班会教案
2015/08/12 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python