项目中的prop()的attr()的jQuery大坑

说起来惭愧，在现在React横行的年代，自己还在大学的项目里面用jQuery慢慢磨。大一的时候深受《锋利的jQuery》的影响，一直都觉得jQuery是一个特别 Niubility 的框架。当然!这只不过是开个玩笑，受项目制约，我还是得认真研究下这个jQuery。

项目中遇到的程序的Bug

以为这个东西非常简单

首先我的项目要做一个全选复选框的功能：列表项有多个复选框，当列表头的复选框的选择了之后，列表中的所有的复选框不管是否已经选择都必须全部选择。而当列表头的复选框取消了选择，所有的列表复选框也必须取消选择。

看似很简单的功能呢。我们知道在复选框中，只要添加了 checked 属性，就算他里面是&＃8221; &＃8220;这样的空值，但是都是选中的。

那就用jQuery的attr()来进行实现吧,将checkbox的 checked 属性变成 checked 值。首先我们来实现全选的功能

if ($(".contentRightListGroupBanderListInput").attr("checked")) {
$("input[name=items]:checkbox").attr('checked', true);
}

结果

结果发现：根本没有反应诶亲！而且如果用了FireBug进行调试，发现if的语句内部根本就进不去啊！

利用Firefox进行调试，发现checked属性的确是true，但是都是进不去if语句。

并且我还发现一个更加严重的问题，怎么做全不选的功能，利用hasAttr()来判断是否有checked属性吗？这样如果没有选中的话，就会返回一个undefined，这个恐怖的东西是我们不想见到的。

翻阅一切资料找到的prop()方法

在jQuery 1.6之后，就开始推荐利用prop()方法来部分替代attr()方法了。利用prop()方法的好处，特别是在处理单选复选框的时候，利用prop()代替attr()会更好。

因为prop()在判断checked只会返回true和false，有这个checked属性返回true，没有就返回false,这样有利于我们判断。但attr()返回都是我们自己定义属性值，例如在 checked 属性中，虽然只要有这属性，选框都是选中，但是他返回的是值，也就不管你里面的值是checked true 还是空值都会返回给你，如果没有checked属性还会返回undefined，简直乱麻。

利用prop方法来判断是否选中的简单代码：

if ($(".contentRightListGroupBanderListInput").prop("checked") == true) {
$("input[name=items]:checkbox").prop('checked', true);
}
if ($(".contentRightListGroupBanderListInput").prop("checked") == false) {
$("input[name=items]:checkbox").prop('checked', false);
}

这样单纯的利用true和false来判断就可以轻松解决用attr()属性解决不了的问题。

什么时候应该用prop()什么时候用attr()呢

其实如果说prop()只是在checked中有大作用那就错了

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();

prop()就是专门为这两个来使用的,例如disabled checked selected

那么在其他情况之下就使用attr就可以完成几乎所有功能了。特别是在自定义属性中，还是一定要用attr()的，因为你定义的属性值可能连你自己都不知道你在定义什么，哈哈，开玩笑。总之，自己定义的属性一定要用attr()。