选择没有值属性的所有单选按钮的最安全方法

Posted 2023-05-09

【中文标题】选择没有值属性的所有单选按钮的最安全方法

【英文标题】：Safest way to select all radio buttons without a value attribute

【发布时间】：2012-07-10 18:02:07

【问题描述】：

http://jsfiddle.net/CuURK/

我有许多单选按钮，例如：

<input type='radio' name='myradio' id='myradio' />

我需要选择标记中没有 value 属性的所有单选按钮，然后为它们设置属性。以下测试不起作用：

$('#myradio').val() // returns 'on'
$('#myradio').attr('value') // returns 'on'

这似乎适用于 Chrome，但不适用于 IE8：

$('#myradio').is('[value]'); //doesn't work in IE8

确定元素是否具有 value 属性的最安全方法是什么？对上述行为有解释吗？

【问题讨论】：

$(":radio[value]") 将选择所有具有 value 属性的单选按钮， $("radio").not(":radio[value]") 将选择所有单选按钮值属性。

【参考方案1】：

最好和最快的方法是坚持使用 CSS 选择器：

$('input[type="radio"]:not([value])')

将返回所有radio的'input元素没有属性value存在-See this fiddle。

由于它返回一个集合，你可以做任何你想做的事情，比如添加缺失的属性、添加一个类、隐藏或删除元素，而不需要 .each() 循环，因为大多数 jQuery 的方法都可以在集合上工作— See this fiddle.

所以在你的情况下添加缺少的属性：

$('input[type="radio"]:not([value])').attr('value', 'foobar');

记住选择器是一个有效的 CSS3 选择器。

---

更新：

根据this，我们的选择器永远不会在 IE8 中匹配，因为如果给定的 attr 为空（我们正在尝试匹配），IE8 无法使用[attr] 匹配。

所以我们必须遍历inputs 并检查属性value 是否等于''，因为如果缺少它，jQuery 会返回一个空字符串。

Here's a fiddle，这在 IE8 上有点工作（我可以在真正的 IE8 上尝试）。

$('input[type="radio"]').each(function (index, element) 
    var $this = $(this);
    if ($this.get(0).outerhtml.indexOf('value') === -1) 
        $this.addClass('found');
    
);

对于每个元素，我们检查其outerHTML 属性是否包含value 字符串。如果它不包含该字符串，我们就找到了它。 正如你将看到的，它只会在这样的节点上失败：

<input type="radio" value />

因为 IE 将其解析为：

<input type="radio" />

这不是有效的解决方案，但它有效。

顺便说一句，正如我在 cmets 中所说，input 和 type="radio" 是 required to have the value attribute。如果不是，则文档无效，浏览器可能会尝试更正文档树 - Firefox 似乎添加了默认值 on，而 Safari 则没有。

最后，如果搜索到的属性不存在（see the source），jQuery 的.attr() 返回undefined：所以一般你可以检查

typeof $('#foo').attr('attributeName') === 'undefined'

查看元素是否具有attributeName 属性。

【讨论】：

尝试在 IE8 中打开你的第一个小提琴 - 不幸的是它不起作用。

.attr('value') 为标记中未指定值的元素返回“on” - 请参阅问题。

根据规范 (w3.org/TR/html401/interact/forms.html#h-17.4)，radio input 需要具有 value 属性，因此浏览器可以添加默认值 on（Firefox 会这样做) 或不 (Safari 不) 在解析树时。但是，由于 DOM 元素上的属性不存在，如果我们在元素上调用 getAttribute('value')，我们将返回 null。也就是说，这个小提琴似乎适用于 Firefox 和 Safari：我没有在 IE8 上尝试过 jsfiddle.net/fS9EN/6

我试过这个，但在 IE8 及更早版本上，getAttribute 似乎也被 'value' 损坏了。不幸的是，我正在为运行 IE8 的公司 Intranet 写作。

【参考方案2】：

以下将起作用：

$('input[type="radio"]:not([value])')

如图所示：http://jsfiddle.net/4sLzc/1/

.val() 返回“on”的原因是没有 value 属性的单选按钮返回“on”是默认行为。这不是 jQuery 的事情：如果您说 document.getElementById("myradio").value，纯 javascript 也会发生同样的事情，或者当您提交表单时，您会发现服务器端的“on”是实际提交的值。

【讨论】：

好的，如果值为on，为什么:not([value]) 工作？如果.attr('value') 返回on，我会认为[value] 会产生相同的效果。

property 的值是on，这就是.val() 返回的内容。 input[type="radio"]:not([value]) 基本上是一个 CSS 选择器，它指定值 attribute。我不确定 jQuery 的 .attr('value') 在这里做什么，因为它似乎返回的是属性而不是属性，我认为它只应该使用布尔属性来做到这一点。如果您使用基本 DOM 元素 .getAttribute('value')，如果该属性不存在，则返回 null。

不幸的是，'[value]' 似乎在 IE8 中不起作用（它认为元素具有'on' 值）。尝试在 IE8 中打开你的小提琴。还有其他建议吗？

【参考方案3】：

这将匹配具有 value 属性的元素

$('input[value]');

这适用于那些不这样做的人

$('!input[value]');

【讨论】：

这是否记录在某处？你也应该使用:radio。

你知道它在他们的文档中提到了很多，但我认为它没有自己的页面，正在搜索！在他们的网站上展示了很多例子，这里有一个：api.jquery.com/attribute-not-equal-selector

那个例子是!= - 与在开头放置! 不同。

确实不是，但是有很多这样的例子（奇怪的是不在 jQuery 网站上）。 ***.com/questions/4521660/…

第二个示例没有将! 放在选择器 中，而是将! 应用于函数 的返回值。