jQuery 如何获取所有未选中的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7592803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all unchecked radio buttons
提问by khvn
Ok, so I've got a jQuery code which constructs my radio inputs from XML data, like this:
好的，所以我有一个 jQuery 代码，它从 XML 数据构造我的无线电输入，如下所示：
var items = xml.children('item');
if (items.length > 0)
{
var ul = $('<ul/>',{
class: 'priceList'
});
items.each(function(){
var $this = $(this);
var li = $('<li/>');
var img = $('<img/>',{
src: 'products/' + $this.children('image').text(),
});
var input = $('<input/>',{
type: 'radio',
id: $this.children('id').text(),
name: 'products'
});
var span = $('<span/>',{
text: $this.children('price').text() + ' USD'
});
var label = $('<label/>',{
for: $this.children('id').text()
});
label.append(img);
label.append("</br>");
label.append(span);
li.append(input);
li.append(label);
ul.hide().append(li).fadeIn('slow');
});
return ul;
}
return null;
Now I need a nice way to find all unchecked radio labels and do something with them, e.g. fade them out or change a css property. Since the XML list consists of nearly 40 items, writing an if-else construction is a no-go. Need a good solution. Thanks in advance!
现在我需要一种很好的方法来查找所有未选中的无线电标签并对其进行处理，例如淡出它们或更改 css 属性。由于 XML 列表包含近 40 个项目，因此编写 if-else 构造是不可行的。需要一个好的解决方案。提前致谢！
EDIT:See my answer below.
编辑：请参阅下面的我的答案。
回答by khvn
Found it myself. None of the above answers worked for me, which is strange, because most of them should be totally legit.
自己找的。以上答案都不适合我，这很奇怪，因为它们中的大多数应该是完全合法的。
What I found to be working is actually
我发现正在工作的实际上是
$('input[type="radio"]:not(:checked)')
And in my case I needed
就我而言，我需要
$('li input[type="radio"]:not(:checked) + label')
And the whole code is:
整个代码是：
//we'll need m for detecting a click outside of element with our radio buttons...
var m = false;
$(document).ready(function(){
$.ajax({
type: "GET", url: 'xml.xml', dataType: 'xml',
success: function(data){
var xml = $(data);
$('#windowList').append( ItemToUl(xml.children()) );
}
});
$('.calc').hover(function(){
m=true;
}, function(){
m=false;
});
$("body").mousedown(function(){
if(! m) {
//...and unchecking a checked radio. I heard that .attr() was deprecated but couldn't get .prop() to work
$('li input[type="radio"]:checked').attr('checked', false);
$('li input[type="radio"]:not(:checked) + label').fadeTo('slow', 1);
}
});
$("li input").live("change", function(){
$('li input[type="radio"]:checked + label').fadeTo('slow', 1);
$('li input[type="radio"]:not(:checked) + label').fadeTo('slow', 0.45);
});
});
//constructing function, etc...
回答by griegs
i think this sould work
我认为这行得通
$("input:!checked");
You may want to put a class selector in there as well.
您可能还想在其中放置一个类选择器。
Then do an .eachto do something with the elements
然后.each对元素做一些事情
回答by Stoosh
$('form input[type="radio"]').not(':checked').each(function() {
$(this).addClass('unchecked');
// or
$(this).slideUp('slow');
});
Obviously the element you use is up to you but the :unchecked selector is what you're after.
显然，您使用的元素取决于您，但 :unchecked 选择器是您所追求的。
