Jquery 获取checkbox的checked问题以及解决方案
2014-01-03 10:59
513 查看
转载自:/article/6914255.html
这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结。。。
事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现.
下面来看看网上大多资料的说法
转别人的一些东西:
jquery判断checkbox是否被选中
在html的checkbox里,选中的话会有属性checked="checked"。
如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($(#xxx).attr("checked")),会打印出"true",而不是"checked"!
如果没被选中,打印出的是"undefined"。
注意红色的部分,这里说到
经过测试,证明上面说法有问题
实验证明Jquery获取checked的值得打印出"true"是错误的
举一反三:
而且发现Jquery获取已经被勾上的checkbox,永远都是"checked" 这让人费解,如果有人知道为什么,可以告诉我一下,哈~~
解决方法,还是用document.get获取吧:
如果有错,希望指正。网上搜索的问题都是一个帖子转N遍,自己测试证明一下
多谢大家的帮助,终于知道了原因,原来是Jquery版本的问题 jquery.1.6之后的版本,就出现这样的问题。果然是知识跟不上更新的速度!!
这里可以看一下官方prop()的说明,和attr的变化
或者从我的新文章了解 Jquery1.6版本后attr的变化,灰常委屈
结论: attr('checked'): 在1.6后版本,所获取的值是 "checked"/"underfined" ,之前所获得的值是"false"/"true"。截然不同
另一种解决方案:
$("#checkbox:checked").length;0为未选,1为选中
延伸阅读:http://www.cnblogs.com/dolphinX/archive/2013/10/01/3348582.html
截取了片段:
相信看完上面内容,大家就明白为什么jQuery要添加prop方法了,在jQuery API中也有专门解释
Attributes VS. Properties
在一些特殊的情况下,attributes和properties的区别非常大。在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了一中明确的获取property值得方式,这样.attr()方法仅返回attributes。
比如,
和
关于布尔类型 attributes,比如一个这样的HTML标签,它在JavaScript中变量名为elem
根据W3C
forms specification,checked属性是一个布尔值,这就意味着只要checked属性在HTML中表现出来了,那么相应的property就应该是true,即使checked没有值,这点儿对其它布尔类型的属性一样适用。
然而关于checked 属性需要记住的最重要的一点是:它和checked property并不是一致的。实际上这个attribute和
attribute并不随着checkedbox的状态而改变,但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用property
这对其它一些类似于selected、value这样的动态attribute也适用。
在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。
这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结。。。
事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现.
下面来看看网上大多资料的说法
转别人的一些东西:
jquery判断checkbox是否被选中
在html的checkbox里,选中的话会有属性checked="checked"。
如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($(#xxx).attr("checked")),会打印出"true",而不是"checked"!
如果没被选中,打印出的是"undefined"。
注意红色的部分,这里说到
$("#chekbox").sttr("checked")//should be print "true" , not "checked"
经过测试,证明上面说法有问题
<script type="text/javascript"> $(function() { $("#button").click(function() { alert($("#checkbox").attr("checked")); }); }); </script> <input type="checkbox" name="checkbox" id="checkbox"><input type="button" id="button" value="Click Me">
//上面得出的结果是: 如果勾上checkbox,会打印出 “checked” , 如果取消打勾 会打印出 "undefined"
实验证明Jquery获取checked的值得打印出"true"是错误的
举一反三:
而且发现Jquery获取已经被勾上的checkbox,永远都是"checked" 这让人费解,如果有人知道为什么,可以告诉我一下,哈~~
<script type="text/javascript"> $(function() { $("#button").click(function() { alert($("#checkbox").attr("checked")); }); }); </script> <input type="checkbox" name="checkbox" id="checkbox" checked><input type="button" id="button" value="Click Me">
//注意红色位置,如果默认checkbox为checked状态,测试会发现,把勾去掉也是只会输出"checked" , 表示不理解为什么 Jquery会这样
解决方法,还是用document.get获取吧:
<script> function getcheckbox(){ var test = document.getElementById("checkbox").checked; alert(test); } </script> <input type="checkbox" name="checkbox" id="checkbox"><input type="button" id="button" value="Click Me" onclick="getcheckbox()">
//选中为"true",取消选中为"false"
如果有错,希望指正。网上搜索的问题都是一个帖子转N遍,自己测试证明一下
多谢大家的帮助,终于知道了原因,原来是Jquery版本的问题 jquery.1.6之后的版本,就出现这样的问题。果然是知识跟不上更新的速度!!
这里可以看一下官方prop()的说明,和attr的变化
或者从我的新文章了解 Jquery1.6版本后attr的变化,灰常委屈
结论: attr('checked'): 在1.6后版本,所获取的值是 "checked"/"underfined" ,之前所获得的值是"false"/"true"。截然不同
另一种解决方案:
$("#checkbox:checked").length;0为未选,1为选中
延伸阅读:http://www.cnblogs.com/dolphinX/archive/2013/10/01/3348582.html
截取了片段:
相信看完上面内容,大家就明白为什么jQuery要添加prop方法了,在jQuery API中也有专门解释
Attributes VS. Properties
在一些特殊的情况下,attributes和properties的区别非常大。在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了一中明确的获取property值得方式,这样.attr()方法仅返回attributes。
比如,
selectedIndex,
tagName,
nodeName,
nodeType,
ownerDocument,
defaultChecked,
和
defaultSelected应该使用.prop()方法获取/设置值。在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute,只有property。
关于布尔类型 attributes,比如一个这样的HTML标签,它在JavaScript中变量名为elem
<input type="checkbox" checked="checked" />
elem.checked | true(Boolean) Will change with checkbox state |
$( elem ).prop( "checked" ) | true(Boolean) Will change with checkbox state |
elem.getAttribute( "checked" ) | "checked"(String) Initial state of the checkbox; does not change |
$( elem ).attr( "checked" )(1.6) | "checked"(String) Initial state of the checkbox; does not change |
$( elem ).attr( "checked" )(1.6.1+) | "checked"(String) Will change with checkbox state |
$( elem ).attr( "checked" )(pre-1.6) | true(Boolean) Changed with checkbox state |
forms specification,checked属性是一个布尔值,这就意味着只要checked属性在HTML中表现出来了,那么相应的property就应该是true,即使checked没有值,这点儿对其它布尔类型的属性一样适用。
然而关于checked 属性需要记住的最重要的一点是:它和checked property并不是一致的。实际上这个attribute和
defaultCheckedproperty一致,而且只应该用来设置checkbox的初始值。checked
attribute并不随着checkedbox的状态而改变,但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用property
if ( elem.checked ) if ( $( elem ).prop( "checked" ) ) if ( $( elem ).is( ":checked" ) )
这对其它一些类似于selected、value这样的动态attribute也适用。
在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。
相关文章推荐
- Jquery 获取checkbox的checked问题以及解决方案
- jQuery中获取CheckBox的checked属性值的问题
- Jquery 获取checkbox的checked问题
- Jquery 获取checkbox的checked问题
- Jquery 获取checkbox的checked问题
- jquery 获取 checkbox 的 checked 状态问题
- jquery获取CheckBox的checked属性值问题
- jQuery获取checkbox状态时attr('checked')返回undefined的问题
- Jquery 获取checkbox的checked问题
- Jquery 获取checkbox的checked问题
- Jquery 获取checkbox的checked问题
- Jquery 获取checkbox的checked问题
- jQuery中用attr和prop获取checkbox的属性问题
- input-color与input-checkbox元素通过jquery获取值以及设定值(input属性的取值与设定)
- jquery中CheckBox的checked状态用attr()的问题
- jQuery 获取选中的radio的值方法以及获取选中的checkbox的值方法
- 浅析jquery与checkbox的checked属性的问题
- jquery attr方法获取input的checked属性问题
- 解决jquery升级1.6后checkbox的attr(checked)一直为undefined问题