2011-09-29 14 views
13

Ok, così ho ottenuto un codice jQuery che costruisce i miei ingressi radio dai dati XML, come questo:Come ottenere tutti i pulsanti di opzione incontrollati

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; 

Ora ho bisogno di un bel modo per trovare tutte le radio incontrollato etichette e fare qualcosa con loro, ad es svanire o modificare una proprietà CSS. Poiché la lista XML è composta da quasi 40 elementi, scrivere una costruzione if-else è un no-go. Hai bisogno di una buona soluzione. Grazie in anticipo!

MODIFICA: Vedere la risposta seguente.

+0

Solo curioso. Puoi impostare lo stile per i bottoni deselezionati come predefinito e solo per riorganizzare quello selezionato? Sembra che sarebbe molto più semplice ed efficiente se possibile. – nycdan

+0

certo che posso. Ma non mi avrebbe ottenuto il risultato che mi serve. lo spettatore ha bisogno di vedere tutti gli elementi inalterati prima di controllarne uno. – khvn

+0

Gotcha. Devo rimuginare su questo. Qualunque cosa accadrà probabilmente con una buona soluzione in ogni caso. – nycdan

risposta

17

trovato io stesso. Nessuna delle risposte di cui sopra ha funzionato per me, il che è strano, perché la maggior parte di esse dovrebbe essere totalmente legittima.

Quello che ho trovato di essere al lavoro è in realtà

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

E nel mio caso ho bisogno

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

E l'intero codice è:

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

Penso che questo funziona Sould

$("input:!checked"); 

si può decidere di mettere un selettore di classe in là pure.

Poi fare un .each di fare qualcosa con gli elementi

+0

Sei sicuro che questo è JQuery valido? Sto scherzando un po 'e non riesco a farlo funzionare. Ma è tardi e sono stanco :) –

+0

questo non funziona per me. Credo che dovresti usare "input: not (: checked)" proprio come nella risposta accettata – ThdK

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

Ovviamente l'elemento si utilizza dipende da voi, ma il: Selettore incontrollato è quello che stai cercando.

5

Prova questo (si veda anche il mio jsfiddle):

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