2011-09-29 17 views
13

Ok, así que tengo un código jQuery que construye mis entradas de radio de datos XML, así:Como ir todos los botones de radio sin marcar

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; 

Ahora necesito una buena manera de encontrar toda la radio sin marcar etiquetas y hacer algo con ellos, por ejemplo descolorarlos o cambiar una propiedad css. Dado que la lista XML consta de casi 40 elementos, escribir una construcción if-else es un no-go. Necesita una buena solución. ¡Gracias por adelantado!

EDITAR: Consulte mi respuesta a continuación.

+0

Sólo por curiosidad. ¿Puedes hacer que el estilo de los botones sin marcar sea el predeterminado y solo el del estilo retrocedido? Parece que sería mucho más fácil y más eficiente si puedes. – nycdan

+0

por supuesto que puedo. Pero no obtendría el resultado que necesito. el espectador necesita ver todos los elementos inalterados antes de verificar uno de ellos. – khvn

+0

Gotcha. Voy a tener que reflexionar sobre esto. Alguien probablemente sucederá junto con una buena solución rápidamente en cualquier caso. – nycdan

Respuesta

17

Encontrado yo mismo. Ninguna de las respuestas anteriores funcionó para mí, lo cual es extraño, porque la mayoría de ellas deberían ser totalmente legítimas.

Lo que me pareció estar trabajando es en realidad

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

Y en mi caso yo necesitaba

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

Y todo el código es:

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

Creo que esto funcione sould

$("input:!checked"); 

es posible que desee poner un selector de clase en allí también.

Después, realice una .each hacer algo con los elementos

+0

¿Estás seguro de que esto es válido para JQuery? Estoy jugando un poco con eso y no puedo hacer que funcione. Pero es tarde y estoy cansado :) –

+0

esto no funciona para mí. Creo que deberías usar "input: not (: checked)" como en la respuesta aceptada – ThdK

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

Obviamente el elemento que se utiliza es de usted, pero el selector: sin control es lo que está buscando.

5

Prueba esto (véase también mi jsfiddle):

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