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.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
To set a radio button to checked/unchecked, select the element and set its checked property to true or false , e.g. myRadio. checked = true . When set to true , the radio button becomes checked and all other radio buttons with the same name attribute become unchecked. Here is the HTML for the examples in this article.
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')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With