选择所有单选按钮没有value属性最安全的方法 [英] Safest way to select all radio buttons without a value attribute

问题描述

http://jsfiddle.net/CuURK/

我有这样一批单选按钮：

 ＆LT;输入类型='无线电'名称='myradio'ID ='myradio/＆GT;
 

我需要选择所有单选按钮，而不在标记值属性，然后设置这些属性。下面的测试不工作：

  $（'＃myradio）。VAL（）//返回开
$（'＃myradio'）。ATTR（'值'）//'上'返回
 

本作品出现在Chrome，但不是IE8：

  $（'＃myradio'）是（'[值]'）; //在IE8无法正常工作
 

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

解决方案

最好和最快的方式就是坚持CSS选择器：

  $（'输入[类型=电台]：不使用（值]）'）
 

将返回所有输入是元素无线 无属性值 present - 。看到这个小提琴

由于它返回一个集合，你可以做你想做的，如添加缺少的属性，增加一类，隐藏或移除元素，而不需要的。每（）循环，因为大多数的jQuery的方法可以在集合的工作 - 看到这个小提琴

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

  $（'输入[类型=电台]：不使用（值]）'）ATTR（'值'，'foobar的'）;
 

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

---

更新：

根据这的我们选择将永远不会匹配IE8，IE8既然无法比拟的使用 [ATTR] 如果给定的attr为空（我们正在试图匹配）。

因此​​，我们必须遍历所有的输入和检查属性值等于，因为如果缺少的jQuery返回一个空字符串。

这里有一个小提琴，这有点儿工作在IE8（我能试试真正的IE8 ）。

  $（'输入[类型=电台]'）。每个（函数（指数，元素）{
    变量$此= $（本）;
    如果（$ this.get（0）.outerHTML.indexOf（'值'）=== -1）{
        $ this.addClass（'发现'）;
    }
}）;
 

有关我们检查，如果 outerHTML 属性包含值字符串中的每个元素。如果是的不包含字符串，我们发现它。
正如你所看到的，它只是失败，这样的节点：

 ＆LT;输入类型=电台值/＆GT;
 

由于IE浏览器将其解析为：

 ＆LT;输入类型=电台/＆GT;
 

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

顺便说一句，我在评论中说，一个输入与键入=电台是< A HREF =htt​​p://www.w3.org/TR/html401/interact/forms.html#h-17.4相对=nofollow>有值所需属性。如果没有，该文件是无效的，而浏览器可能会尝试的正确的文档树 - 火狐似乎就添加默认值，而Safari浏览器不支持。

最后，jQuery的 .attr（） 返回未定义如果属性搜索不存在（的看源）：这样的一般的，你可以检查

  typeof运算$（'＃富'）。ATTR（'的attributeName'）===未定义
 

要查看是否元素的的attributeName 属性。

http://jsfiddle.net/CuURK/

I have a number of radio buttons like:

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

I need to select all radio buttons without a value attribute in the markup, and then set the attribute for these. The following tests don't work:

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

This appears works in Chrome, but not IE8:

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

What's the safest way to determine if an element has a value attribute? Is there an explanation for the above behaviour?

解决方案

The best and fastest way is to stick to CSS selectors:

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

will return all'input elements that are radio without the attribute value present — See this fiddle.

Since it returns a collection you can do whatever you want, like adding the missing attribute, adding a class, hiding or removing the elements, without the need of a .each() loop, because most of jQuery's methods can work on collections — See this fiddle.

So in your case to add the missing attribute:

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

Remember that the selector is a valid CSS3 selector.

---

Update:

According to this our selector will never match in IE8, since IE8 can't match using [attr] if the given attr is empty (and we're trying to match that).

So we have to loop over the inputs and check if the attribute value is equal to '', since if it's missing jQuery return an empty string.

Here's a fiddle, that kinda works on IE8 (I was able to try it on a real IE8).

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

For each element we check if its outerHTML property contains the value string. If it doesn't contain the string, we found it. As you'll see, it only fails with a node like this:

<input type="radio" value />

because IE parses it as:

<input type="radio" />

It's not the efficient solution, but it works.

By the way, as I said in the comments, an input with type="radio" is required to have the value attribute. If it doesn't, the document is invalid, and browser may try to correct the document tree – Firefox appears to add a default value of on, while Safari doesn't.

Finally, jQuery's .attr() returns undefined if the attribute searched doesn't exist (see the source): so generally you could check for

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

to see if the element has the attributeName attribute.

这篇关于选择所有单选按钮没有value属性最安全的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！