最安全的方法来选择没有值属性的所有单选按钮
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]');