奇葩问题——jquery操作checkbox的 checked属性

最新推荐文章于 2024-10-05 01:22:45 发布

chuanhe1056

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量184

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1391970/blog/223239

版权

最近做checkbox，遇到一个奇葩问题，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
    <input type="button" value="all" id="selall">

    <input type="checkbox" name="sel[]" value="1">1
    <input type="checkbox" name="sel[]" value="2">2
    <input type="checkbox" name="sel[]" value="3">3
<script type="text/javascript">
$(function(){
    var chk = false,
        sel = $('input[name^="sel"]');
    $('#selall').click(function(){
        if(chk){
            chk = false;
            sel.attr('checked', false);
        }else{
            chk = true;
            sel.attr('checked', true);
        }
    })
})
</script>
</body>
</html>

以上代码chrome中，点击button 全选，再点击全不选。一切正常，但是第三次点击，就罢工了。F12查看，发现checked属性是修改了的，就是说添加了 checed="checked"，但是未显示勾。

检查代码，没有问题啊。难道是兼容问题，于是换了firefox，问题依旧。之后又换了IE，居然正常了！！没错IE正常，这是要逆袭的节奏？不能啊……于是查看jquery API，在.attr()中中间一点，吐槽完IE后，有这么一段话

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr()method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr()retrieves attributes.

就是说jquery 1.6+，使用attr()，获取未定义的属性将返回undefined .检索和修改DOM的特性（property），如表单元素的checked，selected，或disabled状态，使用prop()方法

于是替换attr()为prop(),简化下代码改为：

var sel = $('input[name^="sel"]');
$('#selall').click(function(){
    if(! $(this).prop('checked')){            
        sel.prop('checked', false);
    }else{           
        sel.prop('checked', true);
    }
})

最后，吐槽下！ IE你果然是个大坑……

转载于:https://my.oschina.net/u/1391970/blog/223239