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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4071 days ago, the information mentioned may be changed or developed.

环境: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();
   }
});

Supplement 1 · Apr 3, 2015

jquery-1.11.1

Supplement 2 · Apr 3, 2015

本人又二逼一回，感谢大家帮助！已经找到原因了。非常感谢各位朋友的！

checkbox

checked

按钮

26 replies • 2015-04-03 18:43:29 +08:00

jianghu52

Apr 3, 2015

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

Apr 3, 2015

jquery对象$(xxx)是不包含原生js的element方法和属性的。
不过你可以使用下面的几个方法做到类似的判断。
if ( $(elem)[0].checked )
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

sneezry

Apr 3, 2015

感觉随着浏览器标准统一jQuery会用的越来越少了。

unknownservice

Apr 3, 2015

用$.prop，读取和设置都是，否则会有兼容问题。

learnshare

Apr 3, 2015

prop 是运行状态，attr 是标签属性。checked 是什么东西？

abccba

Apr 3, 2015

@jianghu52 @zkd8907 谢谢，两位说的方法还是不work呀，好奇怪。

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

哪里姿势不对。。。快疯了。。。

br00k

Apr 3, 2015

$('#op-checkbox:checked').length

jianghu52

Apr 3, 2015

@abccba 把你的代码贴出来吧。
需要两部分。
1.所有引用的js文件名
2.你的checkbox 的html代码

qianleilei

Apr 3, 2015

Solution 1:

$('#op-checkbox')[0].checked

yizi

Apr 3, 2015

jQuery是什么版本的？1.7.1的话 is(':checked') 应该没问题的呀。

abccba

Apr 3, 2015

@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

Apr 3, 2015

用 @qianleilei 的方法就可以
checked是dom对象的属性，所以用 $('#op-checkbox')[0] 找到dom对象就行了。

abccba

Apr 3, 2015

@jianghu52 额，上面的贴的有点问题，判断是否checked的是这一句：
if( $('#op-checkbox').attr('checked') === "undefined" )

@unknownservice 额，好吧，我研究研究，谢谢。

x6doooo

Apr 3, 2015

-.-||
这个
$('#op-checkbox').attr('checked')
改成
$('#op-checkbox input').prop('checked')

abccba

Apr 3, 2015

@tobeyouth 好像真不行，无论怎样都选中或者未选中，都是"undefined" :( thx.

yizi

Apr 3, 2015

这是什么写法，为什么要把input用label包起来。。
你这样用$('#op-checkbox')拿到的是label。。。。

unknownservice

Apr 3, 2015

你这都在label上，当然没有checked了，取下面的input啊。

jianghu52

Apr 3, 2015

幸好让你把代码贴出来了。
你一直在判断的都是lable的属性。当然没有checked的属性了。
你给checkbox一个ID，或者像@x6dooo 写的那样，应该就没有问题了。

abccba

Apr 3, 2015

@Yokira @unknownservice 我脑残了，copy来的代码然后改的。谢谢。

f0rger

Apr 3, 2015

取到的是label，又不是checkbox。当然永远是undefined了

tobeyouth

Apr 3, 2015

@abccba 是不是页面里多个 $('#op-checkbox')
你可以这样写：
$('#op-checkbox').click(function(){
if( this.checked ){
alable.show();
} else{
alable.hide();
}
});

yizi

Apr 3, 2015

@abccba 抱歉，可以用label把input包住~~

catoncat

Apr 3, 2015

你在逗我? <label id="op-checkbox">
$('#op-checkbox') 连 input 都没选到.

abccba

Apr 3, 2015

@tobeyouth 额，是有多个checkbox，分别对应多个“块”，每个checkbox负责一个“块”的显示。

jinganchuqi

Apr 3, 2015

if($("input:checkbox:checked").val()){
###
}
这样应该可以的！

andy12530

Apr 3, 2015

disabled
readonly
autofocus
checked
这种属性级的用prop，
如果是自定义属性，用attr.
数据型的用data