Question

我有很多单选按钮，如：

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

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

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

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

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

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

Answer 1

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

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

将返回input 的所有“radio元素，而不存在属性value - See this fiddle。

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

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

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

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

更新

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

所以我们必须遍历input并检查属性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" />

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

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

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

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

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

Answer 2

以下内容可行：

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

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

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

Answer 3

这将匹配具有值属性

的元素

$('input[value]');

这适用于那些没有

的人

$('!input[value]');

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

3 个答案: