V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
abccba
V2EX  ›  JavaScript

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

  •  
  •   abccba · 2015-04-03 14:32:24 +08:00 · 4345 次点击
    这是一个创建于 3511 天前的主题,其中的信息可能已经有所发展或是发生改变。

    环境: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 条附言  ·  2015-04-03 15:26:44 +08:00
    jquery-1.11.1
    第 2 条附言  ·  2015-04-03 15:48:16 +08:00
    本人又二逼一回,感谢大家帮助!已经找到原因了。非常感谢各位朋友的!
    26 条回复    2015-04-03 18:43:29 +08:00
    jianghu52
        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 得到的返回值好像还不一样。具体怎么不一样忘记了。
    zkd8907
        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") )
    sneezry
        3
    sneezry  
       2015-04-03 14:42:58 +08:00
    感觉随着浏览器标准统一jQuery会用的越来越少了。
    unknownservice
        4
    unknownservice  
       2015-04-03 14:45:38 +08:00
    用$.prop,读取和设置都是,否则会有兼容问题。
    learnshare
        5
    learnshare  
       2015-04-03 14:50:47 +08:00
    prop 是运行状态,attr 是标签属性。checked 是什么东西?
    abccba
        6
    abccba  
    OP
       2015-04-03 14:55:13 +08:00
    @jianghu52 @zkd8907 谢谢,两位说的方法还是不work呀,好奇怪。

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

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

    $('#op-checkbox')[0].checked
    Yokira
        10
    Yokira  
       2015-04-03 15:09:57 +08:00
    jQuery是什么版本的?1.7.1的话 is(':checked') 应该没问题的呀。
    abccba
        11
    abccba  
    OP
       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
        12
    tobeyouth  
       2015-04-03 15:37:44 +08:00
    用 @qianleilei 的方法就可以
    checked是dom对象的属性,所以用 $('#op-checkbox')[0] 找到dom对象就行了。
    abccba
        13
    abccba  
    OP
       2015-04-03 15:41:24 +08:00
    @jianghu52 额,上面的贴的有点问题,判断是否checked的是这一句:
    if( $('#op-checkbox').attr('checked') === "undefined" )



    @unknownservice 额,好吧,我研究研究,谢谢。
    x6doooo
        14
    x6doooo  
       2015-04-03 15:43:35 +08:00   ❤️ 1
    -.-||
    这个
    $('#op-checkbox').attr('checked')
    改成
    $('#op-checkbox input').prop('checked')
    abccba
        15
    abccba  
    OP
       2015-04-03 15:44:31 +08:00
    @tobeyouth 好像真不行,无论怎样都选中或者未选中,都是"undefined" :( thx.
    Yokira
        16
    Yokira  
       2015-04-03 15:46:24 +08:00
    这是什么写法,为什么要把input用label包起来。。
    你这样用$('#op-checkbox')拿到的是label。。。。
    unknownservice
        17
    unknownservice  
       2015-04-03 15:48:02 +08:00
    你这都在label上,当然没有checked了,取下面的input啊。
    jianghu52
        18
    jianghu52  
       2015-04-03 15:50:03 +08:00   ❤️ 1
    幸好让你把代码贴出来了。
    你一直在判断的都是lable的属性。当然没有checked的属性了。
    你给checkbox一个ID,或者像@x6dooo 写的那样,应该就没有问题了。
    abccba
        19
    abccba  
    OP
       2015-04-03 15:50:58 +08:00
    @Yokira @unknownservice 我脑残了,copy来的代码然后改的。谢谢。
    f0rger
        20
    f0rger  
       2015-04-03 15:51:24 +08:00
    取到的是label,又不是checkbox。当然永远是undefined了
    tobeyouth
        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();
    }
    });
    Yokira
        22
    Yokira  
       2015-04-03 15:52:18 +08:00
    @abccba 抱歉,可以用label把input包住~~
    crs0910
        23
    crs0910  
       2015-04-03 15:55:12 +08:00
    你在逗我? <label id="op-checkbox">
    $('#op-checkbox') 连 input 都没选到.
    abccba
        24
    abccba  
    OP
       2015-04-03 15:59:48 +08:00
    @tobeyouth 额,是有多个checkbox,分别对应多个“块”,每个checkbox负责一个“块”的显示。
    jinganchuqi
        25
    jinganchuqi  
       2015-04-03 18:17:19 +08:00
    if($("input:checkbox:checked").val()){
    ###
    }
    这样应该可以的!
    andy12530
        26
    andy12530  
       2015-04-03 18:43:29 +08:00
    disabled
    readonly
    autofocus
    checked
    这种属性级的用prop,
    如果是自定义属性,用attr.
    数据型的用data
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1050 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:47 · PVG 03:47 · LAX 11:47 · JFK 14:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.