环境: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();
}
});
1
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 得到的返回值好像还不一样。具体怎么不一样忘记了。 |
2
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") ) |
3
sneezry 2015-04-03 14:42:58 +08:00
感觉随着浏览器标准统一jQuery会用的越来越少了。
|
4
unknownservice 2015-04-03 14:45:38 +08:00
用$.prop,读取和设置都是,否则会有兼容问题。
|
5
learnshare 2015-04-03 14:50:47 +08:00
prop 是运行状态,attr 是标签属性。checked 是什么东西?
|
6
abccba OP |
7
br00k 2015-04-03 15:02:04 +08:00
$('#op-checkbox:checked').length
|
9
qianleilei 2015-04-03 15:04:07 +08:00
Solution 1:
$('#op-checkbox')[0].checked |
10
Yokira 2015-04-03 15:09:57 +08:00
jQuery是什么版本的?1.7.1的话 is(':checked') 应该没问题的呀。
|
11
abccba OP @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> |
12
tobeyouth 2015-04-03 15:37:44 +08:00
用 @qianleilei 的方法就可以
checked是dom对象的属性,所以用 $('#op-checkbox')[0] 找到dom对象就行了。 |
13
abccba OP @jianghu52 额,上面的贴的有点问题,判断是否checked的是这一句:
if( $('#op-checkbox').attr('checked') === "undefined" ) @unknownservice 额,好吧,我研究研究,谢谢。 |
14
x6doooo 2015-04-03 15:43:35 +08:00 1
-.-||
这个 $('#op-checkbox').attr('checked') 改成 $('#op-checkbox input').prop('checked') |
16
Yokira 2015-04-03 15:46:24 +08:00
这是什么写法,为什么要把input用label包起来。。
你这样用$('#op-checkbox')拿到的是label。。。。 |
17
unknownservice 2015-04-03 15:48:02 +08:00
你这都在label上,当然没有checked了,取下面的input啊。
|
18
jianghu52 2015-04-03 15:50:03 +08:00 1
|
19
abccba OP @Yokira @unknownservice 我脑残了,copy来的代码然后改的。谢谢。
|
20
f0rger 2015-04-03 15:51:24 +08:00
取到的是label,又不是checkbox。当然永远是undefined了
|
21
tobeyouth 2015-04-03 15:51:44 +08:00
@abccba 是不是页面里多个 $('#op-checkbox')
你可以这样写: $('#op-checkbox').click(function(){ if( this.checked ){ alable.show(); } else{ alable.hide(); } }); |
23
crs0910 2015-04-03 15:55:12 +08:00
你在逗我? <label id="op-checkbox">
$('#op-checkbox') 连 input 都没选到. |
25
jinganchuqi 2015-04-03 18:17:19 +08:00
if($("input:checkbox:checked").val()){
### } 这样应该可以的! |
26
andy12530 2015-04-03 18:43:29 +08:00
disabled
readonly autofocus checked 这种属性级的用prop, 如果是自定义属性,用attr. 数据型的用data |