如何获取所有未选中的单选按钮

Question

好的，我有一个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;

现在我需要一种好的方法来查找所有未选中的单选按钮标签，并对它们执行一些操作，例如淡出或更改CSS属性。由于XML列表包含近40个项目，编写if-else结构不可行。需要一个好的解决方案。提前感谢！

编辑：请看下面我的答案。

- khvn

---

只是好奇。您能否将未选中按钮的样式设置为默认，并仅重新设计选中的按钮？如果可以的话，似乎会更容易和更有效率。 - nycdan

当然可以。但这样做无法得到我需要的结果。在查看其中一个元素之前，观众需要看到所有元素不变。 - khvn

明白了，我需要再考虑一下。不过很可能很快就会有人提出好的解决方案。 - nycdan

Answer 1

我自己找到了解决方法。以上答案对我都不起作用，这很奇怪，因为它们大多数应该完全可行。

我发现有效的方法实际上是：

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

在我的情况下，我需要

$('li input[type="radio"]:not(:checked) + label')

完整的代码如下：

//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...

- khvn

Answer 2

尝试这个（还可查看我的jsfiddle）：

$('input').not(':checked')

- scessor

Answer 3

我认为这应该可以工作。

$("input:!checked");

您可能还需要在其中加入一个类选择器。

然后使用.each对元素进行操作。

- griegs

---

你确定这是有效的JQuery吗？我在试着弄它，但是无法让它工作。不过现在已经很晚了，我也很累 :) - Cory Kendall

这对我不起作用。我认为你应该使用“input：not（：checked）”，就像被接受的答案中那样。 - ThdK

Answer 4

$('form input[type="radio"]').not(':checked').each(function() {
    $(this).addClass('unchecked');
    // or
    $(this).slideUp('slow');
});

显然，你使用的元素取决于你，但是:unchecked选择器是你要找的。

- Stoosh