如何获取所有未经检查的单选按钮 [英] How to get all unchecked radio buttons

问题描述

好的，我有一个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 />'，{
 type：'radio'，
 id：$ this.children（'id'）.text（），
 name： 'product'
}）; 
 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'）; 
}）; 
返回ul; 
} 
返回null; 
  

现在我需要一个很好的方法来找到所有未经检查的收音机标签，淡出或改变CSS属性。由于XML列表包含近40个项目，因此编写一个if-else结构是一个不行。需要一个好的解决方案提前致谢！

编辑：请参阅下面的答案。 方案

自己找到它。以上答案都不适用于我，这很奇怪，因为它们中的大多数都应该是完全合法的。

我发现的工作实际上是

  $（'input [type =radio]：not（：checked）''）
  

在我的情况下，我需要

  $（' li输入[type =radio]：not（：checked）+ label'）
  

整个代码是：

  //我们需要m来检测单选按钮之外的单击操作... 
 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。 .attr（）已被弃用，但无法让.prop（）工作
 $（'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'）。 
 $（'li input [type =radio]：not（：选中）+ label'）。fadeTo（'slow'，0.45）; 
}）; 
}）; 
 
 //构造函数等... 
  

Ok, so I've got a jQuery code which constructs my radio inputs from XML data, like this:

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!

EDIT: See my answer below.

解决方案

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

这篇关于如何获取所有未经检查的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！