jQuery中attr()和prop()在修改checked属性时的区别

jQuery中attr()和prop()在修改checked属性时的区别

前段时间做一个项目 用Jquery 操作复选框 遇到了几个奇怪的问题 现在贴出来分享

目标:如果输入框有内容，那么相对的复选框会打勾。如没有内容，勾取消。功能很简单。

先贴前端部分代码 这是用bootstrap3制作的一个输入框 

<div class="form-group">
    <label class="col-sm-3 control-label">协议类型</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" value="0" id="protocol" name="protocol" >
    </div>
</div>

这里是对应的复选框代码

<div class="checkbox">
    <label>
        <input type="checkbox" class="" id="protocolCheckbox" value="32" checked="checked"> 协议
    </label>
</div>

对应的jquery如下（bug版）

$("#protocol").blur(function () {
   if($("#protocol").val()!="")
      $("#protocolCheckbox").attr("checked",true);
   else{
      $("#protocolCheckbox").removeAttr("checked");
   }
});

大家看，感觉没什么问题哦吧，在输入框失去焦点时，会进行一次判断，如果为空，则移除checked属性，ok没问题，如果有值，那么会添加checked并设置为选中（checked="checked"一样）。但是问题来了！当第二次有值时，勾就打不上了！查看html源代码，果断看到checked="checked"，但就是勾没有打上！

代码变换如下，问题就解决了！

$("#protocol").blur(function () {
   if($("#protocol").val()!="")
      $("#protocolCheckbox").prop("checked",true);
   else{
      $("#protocolCheckbox").prop("checked",false);
   }
});

那么原因何在呢？

那么原因何在呢？

实际是因为这样：

原因是HTML的属性分为attribute和property，暂且将后者称为特性。

checked属性即分为attribute->checked，和property->true,false。

对于一个checkbox，若未定义checked="checked"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。

attribute并不随着checkbox的状态变化而改变。

也就是说：你给复选框打上勾或取消勾，并不会影响到attr，但property会有变化。那为什么第一次有

而第二次就没有呢？因为浏览器兼容的问题！如果换上IE8就没事了。。。（笔者用的chrome）

使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。

所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。

关于其他类似属性的图表：

就是这样。。。