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

http://jsfiddle.net/CuURK/

我有很多单选按钮,如:

 

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

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

这似乎适用于Chrome,但不适用于IE8:

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

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

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

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

将返回所有没有属性value radio input元素 – 请参阅此小提琴 。

因为它返回一个集合,你可以做任何你想做的事情,比如添加缺少的属性,添加一个类,隐藏或删除元素,而不需要.each()循环,因为大多数jQuery的方法都可以处理集合 – 请参阅这个小提琴 。

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

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

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


更新:

根据这个,我们的选择器在IE8中永远不会匹配,因为如果给定的attr是空的,IE8无法使用[attr]匹配(我们正试图匹配它)。

所以我们必须循环input s并检查属性value是否等于'' ,因为如果缺少jQuery则返回一个空字符串。

这是一个小提琴 ,有点适用于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字符串。 如果它包含字符串,我们就找到了它。 正如您将看到的,它只会失败,如下所示:

  

因为IE将其解析为:

  

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

顺便说一句,正如我在评论中所说, input type="radio" 需要具有value属性 。 如果没有,则文档无效,浏览器可能会尝试更正文档树 – Firefox似乎会添加默认值on ,而Safari则不会。

最后,如果搜索的属性不存在,jQuery的.attr()将返回undefined ( 参见源代码 ):所以通常你可以检查

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

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

以下将有效:

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

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

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

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

 $('input[value]'); 

对于那些没有的人

 $('!input[value]');