jQuery radio onchange attiva la classe dell'elemento padre?

Question

prega di dare un'occhiata al seguente:

$('#myRadio').change(function() {   

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } else {        
     $(this).parent().removeClass('green'); 
    } 
}); 

Markup lookslike un po 'come a seguito

<table> 
    <tr> 
    <td>Some text 1 </td> 
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td> 
    <td>Some text 2 </td> 
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td> 
    <td>Some text 3 </td> 
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td> 
    </tr> 
</table> 

Quando accendo la radio, soprattutto javascript codice si applica 'verde' a TD tag, che va bene. Ma se cambio la selezione in un'altra aggiunge il verde a un'altra ma non rimuove il verde dalla radio selezionata in precedenza.

Come faccio a farlo funzionare in modo che la selezione di una delle opzioni della radio cambia classe del suo TD genitore di verde e selezionando un altro resetterà tutti, ma aggiungere verde al solo appena selezionata!

Può anche essere fatto per cambiare la classe del suo primo TD precedente, che contiene "del testo 3", ecc ??

Grazie.

Answer 1

provare qualcosa di simile:

if($(this).is(':checked')) { 
    $(this).parent().parent().parent().find('.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

Ciò trovare l'elemento tavolo del vostro attuale raggruppamento pulsante di opzione, a trovare nessuna elementi con la classe verde e rimuovere la classe.

In alternativa, se avete solo gruppo di pulsanti di una radio nella pagina, sarebbe più semplice fare solo:

$('.green').removeClass('green'); 

Answer 2

Prova questa:

if($(this).is(':checked')) { 
    $(this).parent().siblings('td.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

Answer 3

Lei non dovrebbe usare il cambiamento() evento su pulsanti di opzione e caselle di controllo. Si comporta in modo un po 'ambiguo e incoerente nei vari browser (causa problemi in tutte le versioni di IE)

Utilizza invece l'evento click() (non preoccuparti dell'accessibilità, perché l'evento click verrà attivato anche se attivi/selezionare un pulsante di opzione con la tastiera)

E come gli altri qui hanno sottolineato, il ripristino del verde è facile così:

così semplicemente modificare il codice per

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } 
}); 

EDIT: come richiesto nel commento, cambia anche il precedente td:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().prev().andSelf().addClass('green'); 
    } 
}); 

o, meglio ancora, girando tutti gli elementi td della riga padre verde:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parents("tr").find("td").addClass('green'); 
    } 
}); 

Answer 4

Ho appena scritto una soluzione che non si preoccupa quanto profondamente annidati i pulsanti di opzione sono, semplicemente usa l'attributo nome dei pulsanti di opzione. Questo significa che questo codice dovrebbe funzionare senza alcuna modifica da nessuna parte, credo - ho dovuto scrivere da quando ho una strana situazione in cui un pulsante di opzione è annidato in modo diverso rispetto ai suoi coorti con lo stesso nome.

$('input[type="radio"]').change(function() { 
    // grab all the radio buttons with the same name as the one just changed 
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]'); 

    // iterate through each 
    // if checked, set its parent label's class to "selected" 
    // if not checked, remove the "selected" class from the parent label 
    // my HTML markup for each button is <label><input type="radio" /> Label Text</label> 
    // so that this works anywhere even without a unique ID applied to the button and label 
    for (var i=0; i < this_radio_set.length;i++) { 
     if ($(this_radio_set[i]).is(':checked')) $(this_radio_set[i]).parents('label').addClass('selected'); 
     else $(this_radio_set[i]).parents('label').removeClass('selected'); 
    } 
}); 

Answer 5

Ecco la soluzione, che ha lavorato molto per me:

var $boxes=$('input:radio'); 
var $parents = $boxes.parent(); 
$boxes.click(function(){ 
    $parents.filter('.selected').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 
$boxes.filter(':checked').parent().addClass('selected'); 

Caratteristiche:

• più veloce. Seleziona solo una volta l'elenco delle caselle di controllo.
• Non si basa su: selezionato. Non sono sicuro che ci sia un determinato ordine in cui "cliccato" e "cambiato" saranno eseguiti attraverso i browser.
• utilizza: radio invece di [tipo = "radio"] che è jQuery consigliato
• imposta la classe sul padre per il valore predefinito del pulsante di opzione.

Spero che questo aiuti!

Answer 6

mia proposta è:

$('#myRadio').change(function() {   
    _parent = $(this).parent(); 
    if($(this).is(':checked')) { 
     _parent.addClass('green'); 
    } else {        
     _parent.removeClass('green'); 
    } 
}); 

Answer 7

Credo che questo sia il modo migliore e più flessibile per fare questo:

dimenticare le tabelle (google conoscere molti ragione per questo) e utilizzare involucri come di seguito

<div id="radio_wrapper"> 
    <span class="radio"> 
     <label for="myRadio1" class="myRadio">Some text 1 </label> 
     <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio2" class="myRadio">Some text 2 </label> 
     <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio3" class="myRadio">Some text 3 </label> 
     <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" /> 
    </span> 
</div 

formato con i CSS come questo

span.radio { 
    background-color: #cccccc; 
} 
span.currentGreen { 
    background-color: #ccffcc; 
} 

e utilizzando questo script si può fare esattamente lo stesso che si vuole

$('.myRadio').change(function() {   
    $('.currentGreen').removeClass('currentGreen'); // remove from all 
    if ($(this).is(':checked')) { 
     $(this).parent().addClass('currentGreen'); // add to current 
    } 
}); 

non mi piace usare il filtro() e trovare() perché utilizzano le risorse non necessarie in questo caso.