选择所有单选按钮没有value属性最安全的方法 [英] Safest way to select all radio buttons without a value attribute
问题描述
我有这样一批单选按钮:
<输入类型='无线电'名称='myradio'ID ='myradio/>
我需要选择所有单选按钮,而不在标记值属性,然后设置这些属性。下面的测试不工作:
$('#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
属性包含值
字符串中的每个元素。如果是的不包含字符串,我们发现它。
正如你所看到的,它只是失败,这样的节点:
<输入类型=电台值/>
由于IE浏览器将其解析为:
<输入类型=电台/>
这不是有效的解决方案,但它工作。
顺便说一句,我在评论中说,一个输入
与键入=电台
是< A HREF =http://www.w3.org/TR/html401/interact/forms.html#h-17.4相对=nofollow>有值所需
属性。如果没有,该文件是无效的,而浏览器可能会尝试的正确的文档树 - 火狐似乎就添加默认值,而Safari浏览器不支持。
最后,jQuery的 .attr()
返回未定义
如果属性搜索不存在(的看源):这样的一般的,你可以检查
typeof运算$('#富')。ATTR('的attributeName')===未定义
要查看是否元素的的attributeName
属性。
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 input
s 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屋!