js 检测 checkbox 状态时遇到的“诡异”问题

2015-04-03 14:32:24 +08:00
 abccba

环境:Firefox 31.3.0 (Linux/Windows)

通过按钮是否被选中控制另一个组件是否显示，以下代码不work，可能是什么原因呢？
调试发现，无论check或者uncheck按钮，$('#op-checkbox').checked总是为假。

$('#op-checkbox').click(function(){
  if( $('#op-checkbox').checked ){
    alable.show();
   } else{
    alable.hide();
   }
});
4368 次点击
所在节点    JavaScript
26 条回复
jianghu52
2015-04-03 14:38:34 +08:00
jquery的经典问题啊。你那个checked都不是标准属性。
jquery判断checked的三种方法:

.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦

另外，如果
<input type='checkbox' checked>
<input type='checkbox' checked="checked">
这样两个checkbox，用attr 得到的返回值好像还不一样。具体怎么不一样忘记了。
zkd8907
2015-04-03 14:41:15 +08:00
jquery对象$(xxx)是不包含原生js的element方法和属性的。
不过你可以使用下面的几个方法做到类似的判断。
if ( $(elem)[0].checked )
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
sneezry
2015-04-03 14:42:58 +08:00
感觉随着浏览器标准统一jQuery会用的越来越少了。
unknownservice
2015-04-03 14:45:38 +08:00
用$.prop，读取和设置都是，否则会有兼容问题。
learnshare
2015-04-03 14:50:47 +08:00
prop 是运行状态，attr 是标签属性。checked 是什么东西？
abccba
2015-04-03 14:55:13 +08:00
@jianghu52 @zkd8907 谢谢，两位说的方法还是不work呀，好奇怪。

.attr('checked') 和 .prop('checked') 还有if ( $(elem)[0].checked ) 无论选中或者不选中，都返回 "undefined"
.is(':checked') 永远返回false.

哪里姿势不对。。。快疯了。。。
br00k
2015-04-03 15:02:04 +08:00
$('#op-checkbox:checked').length
jianghu52
2015-04-03 15:03:00 +08:00
@abccba 把你的代码贴出来吧。
需要两部分。
1.所有引用的js文件名
2.你的checkbox 的html代码
qianleilei
2015-04-03 15:04:07 +08:00
Solution 1:

$('#op-checkbox')[0].checked
Yokira
2015-04-03 15:09:57 +08:00
jQuery是什么版本的？1.7.1的话 is(':checked') 应该没问题的呀。
abccba
2015-04-03 15:37:28 +08:00
@Yokira 谢谢，是1.11.1版本的。


@qianleilei 额，还是不行。。。

@jianghu52 简化整合到1个html文件了，我这里无论怎么点击，都是"undefined"，无法区分选中和未选中。。。求帮忙看看，谢谢啦。

<html>

<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$('#op-checkbox').change(function(){
if( $('#op-checkbox').attr('checked') ){
alert("hi, checked");
} else{
alert("hello, unchecked");
}
});
});
</script>
</head>

<body>
<label id="op-checkbox"><input type="checkbox">op</label>
</body>

</html>
tobeyouth
2015-04-03 15:37:44 +08:00
用 @qianleilei 的方法就可以
checked是dom对象的属性，所以用 $('#op-checkbox')[0] 找到dom对象就行了。
abccba
2015-04-03 15:41:24 +08:00
@jianghu52 额，上面的贴的有点问题，判断是否checked的是这一句：
if( $('#op-checkbox').attr('checked') === "undefined" )



@unknownservice 额，好吧，我研究研究，谢谢。
x6doooo
2015-04-03 15:43:35 +08:00
-.-||
这个
$('#op-checkbox').attr('checked')
改成
$('#op-checkbox input').prop('checked')
abccba
2015-04-03 15:44:31 +08:00
@tobeyouth 好像真不行，无论怎样都选中或者未选中，都是"undefined" :( thx.
Yokira
2015-04-03 15:46:24 +08:00
这是什么写法，为什么要把input用label包起来。。
你这样用$('#op-checkbox')拿到的是label。。。。
unknownservice
2015-04-03 15:48:02 +08:00
你这都在label上，当然没有checked了，取下面的input啊。
jianghu52
2015-04-03 15:50:03 +08:00
幸好让你把代码贴出来了。
你一直在判断的都是lable的属性。当然没有checked的属性了。
你给checkbox一个ID，或者像@x6dooo 写的那样，应该就没有问题了。
abccba
2015-04-03 15:50:58 +08:00
@Yokira @unknownservice 我脑残了，copy来的代码然后改的。谢谢。
f0rger
2015-04-03 15:51:24 +08:00
取到的是label，又不是checkbox。当然永远是undefined了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/181345

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX