jQuery中prop()和attr()方法的测试和总结

对应单选按钮和复选框的选中一般都是通过增加属性checked="checked"来使选中，但是在使用jquery时遇到了一些问题，自己做了一个测试，大家可以借鉴下。

期望的结果是，勾选男，点击勾选女，再点击勾选男，依次类推。

性别：<input name="sex" value="男" type="radio" checked/>男<input name="sex" value="女" type="radio" />女<br />
<input id="radioTestBtn" value="测试" type="button"/>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/lib/jquery/1.11.3/jquery.min.js"></script>

$(function(){
$("#radioTestBtn").click(function(){
// 如果勾选男，点击后勾选女；再点击勾选男
var selectedVal = $("input[name='sex']:checked").val();
if ('男' == selectedVal) {
//$("input[value='女']").prop("checked", true);
$("input[value='男']").removeAttr("checked");
$("input[value='女']").attr("checked", true);
} else {
//$("input[value='男']").prop("checked", true);
$("input[value='女']").removeAttr("checked");
$("input[value='男']").attr("checked", true);
}
});
});

一、jQuery 1.11.3

1、prop方法

js/lib/jquery/1.11.3/jquery.min.js

使用prop()方法ok，需要勾选男时，不用去勾选女。这点考虑到单选按钮组只有一个被选中，勾选一个，其他的都去勾选的原理。

prop()  value设置不同的值譬如

$("input[value='男']").prop("checked", "abcde");

$("input[value='男']").prop("checked", "1234");

$("input[value='男']").prop("checked", "false");效果跟$("input[value='男']").prop("checked", true);是一样的，都会被选中。不过写代码时还是建议$("input[value='男']").prop("checked", true);

2、attr方法

第一次点击发现女单选按钮增加了checked="checked"

<input name="sex" value="女" type="radio" checked="checked"> 女，

再次点击按钮，男单选按钮由checked变成checked="checked"

<input name="sex" value="男" type="radio" checked="checked">男

后面再点击，男单选按钮一直被勾选，两个单选按钮都有checked="checked"，也不对。

继续测试：

增加了移除checked属性$("input[value='男']").removeAttr("checked");

第一次点击是女单选按钮被选中，第二次点击两个单选按钮都没有被选中，后面点击效果一样，都是没被勾选。

测试把移除语句放到attr()方法前面，和上面结果是一样的。

二、换成<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.5.1.min.js"></script>

attr()方法就正常了。不管加不加移除$("input[value='男']").removeAttr("checked");都可以，不过我们代码中的checked会被移掉。即使加上放前放后都可以。

不加removeAttr()语句，checked不会被移除，但不影响结果。

prop()  Uncaught TypeError: $(...).prop is not a function 怀疑是1.6新加的。

参考：http://www.jb51.net/article/43303.htm

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述，以及.attr()方法和.prop()方法的首选使用 

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。 

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些，下面是一些使用.attr()的例子，虽然在jQuery之前的版本中能正常工作，但是现在必须使用.prop（）方法代替： 
 
首先，window或document中使用.attr()方法在jQuery1.6中不能正常运行，因为window和document中不能有attributes。它们包含properties(比如：location或readyState)，必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中，window和document中使用.attr()将被自动转成使用.prop，而不是抛出一个错误。 

其次，checked,selected和前面提到的其它boolean attributes，因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上，一个attribute就是以下html中你看到的： 

<input type=”checkbox” checked=”checked”> 

boolean attributes，比如：checked，仅被设置成默认值或初始值。在一个checkbox的元素中，checked attributes在页面加载的时候就被设置，而不管checkbox元素是否被选中。 

properties就是浏览器用来记录当前值的东西。正常情况下，properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。

个人总结：使用几次的经验觉得使用prop()更靠谱，毕竟使用1.5.1版本的jquery是少数。

只是之前写的代码做了一个表格，标题有一个全选的复选框，每行有一个复选框，使用.attr()正常

换了一个jquery版本，发现不好用了，就自己写代码测试了一下。