您的位置：首页 > Web前端 > JQuery

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

2015-11-05 10:28 645 查看

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="check
adcc
ed"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。

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

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

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

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

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

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

就是这样。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 bootstrap jquery

相关文章推荐

新的分享

章节导航