jQuery 的 attr() 方法行为答案

【问题标题】：jQuery's attr() method behaviorjQuery 的 attr() 方法行为
【发布时间】：2016-10-11 11:18:05
【问题描述】：

^{这不是 ' attr() 与 prop() ' 的问题。}

考虑拥有这个如此简单的网络表单：

<form action="/">
    <input type="radio" name="type" value="1" checked>
    <input type="radio" name="type" value="2" >
    <input type="radio" name="type" value="3" >
    <input type="radio" name="type" value="4" >
    <button type="submit"> Submit </button>
</form>

第一个单选按钮的默认属性为checked，打开此网络表单会显示一张众所周知的图片：

在一个书面的 jQuery 脚本文件中，我试图检查一个单选按钮 - 但是它可以使用 prop() 以一种正确且不令人头疼的方式完成，我选择了 attr()。

使用浏览器的控制台，我可以立即查看结果：

但我知道我应该先取消选中所有输入，然后再检查所需的输入以获得正确的结果：

争吵从这里开始，重复第一步：

我的问题是为什么会这样？单选按钮中没有复选标记，并且服务器端没有任何值。

【问题讨论】：

发布你的 jQuery 代码
@AnkurBhadania 这个简单的例子是一个带有如此给定代码的真实例子。但是没有.js 文件。
你用的是什么版本的jQuery？
@putvande jQuery v1.12.1
代码，任何想测试它的人：jsfiddle.net/7obwhush

标签： jquery

【解决方案1】：

问题是特定于 jQuery 版本的。这根本不是一个错误，也没有随 jQuery v3 alpha 版本一起发布。

不过后来，从 jQuery v3 beta 版本开始，removeAttr() 发生了一些变化。

在 jQuery 中，removeAttr() 方法将动态/当前状态设置为 false：

// Set corresponding property to false
if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
    elem[ propName ] = false;

而在另一边attr() 只设置默认状态（不是当前状态）。但在 jQuery >= 3.0 中，我们不再看到这些行了。

在除 v3.*（> 最终版和 beta 版）之外的所有版本中，我们不能期望从这两行中检查单选按钮：

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').attr('checked', true);

但这三行是相互配合的：

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').attr('checked', true);
$('input[value="3"]').prop('checked', true);

或者更简单：

$('input[name="type"]').removeAttr('checked');
$('input[value="3"]').prop('checked', true);

（但请注意，某些 javascript 代码可能会检查属性而不是属性。所以你必须做一个额外的.atrr()）

同样在早期版本中，最好不要使用removeAttr()，而只使用attr()，如下所示：

$('input[name="type"]:checked').attr('checked', false);
$('input[type="3"]').attr('checked', true);

removeAttr() 的这种行为变化也在Github 上进行了讨论。

感谢那些对此问题发表评论的人。

【讨论】：