How to get all unchecked radio buttons
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...
Try this (also see my jsfiddle):
$('input').not(':checked')
i think this sould work
$("input:!checked");
You may want to put a class selector in there as well.
Then do an .each
to do something with the elements
$('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.
精彩评论