jQuery radio onchange alternar clase de elemento principal?

Question

Por favor, echar un vistazo a la siguiente:

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

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

marcado un tanto lookslike de la siguiente manera

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

Cuando cambio de radio, por encima de código javascript aplica 'verde' a TD etiqueta, lo cual está bien. Pero si cambio la selección a otra, agrega el verde a otro, pero no elimina el verde de la radio seleccionada previamente.

¿Cómo puedo hacer que funcione para que al seleccionar una opción de radio cambie la clase de TD principal a verde y al seleccionar otra se restablecerán todas las opciones, pero agregará verde a la recién seleccionada!

¿Se puede hacer también para cambiar la clase de su primer TD anterior que contiene "algún texto 3", etc.?

Gracias.

Answer 1

intentar algo como esto:

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

Este se encuentra el elemento de la tabla de la actual agrupación botón de radio, encontrar elementos con la clase verde, y retire la clase.

Alternativamente, si sólo tiene un grupo de botones de radio en la página, sería más sencillo que acaba de hacer:

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

Answer 2

Prueba esto:

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

Answer 3

No use el cambio() evento en botones de radio y casillas de verificación. Se comporta un poco dudoso e inconsistente en todos los navegadores (causa problemas en todas las versiones de IE)

Use el evento click() (no se preocupe por la accesibilidad, porque el evento click también se activará si activa/seleccionar un botón de opción con el teclado)

Y como los otros aquí señaladas, restablecer el verde es fácil, así:

así que simplemente cambiar el código para

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

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

EDIT: como se solicita en comentar, también cambiar el td anterior:

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

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

o incluso mejor, convirtiendo todos los elementos TD de la fila principal verde:

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

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

Answer 4

acabo escribió una solución que no importa cuán profundamente anidado los botones de radio son, simplemente usa el atributo de nombre de los botones de radio. Esto significa que este código funcionaría sin modificaciones en ninguna parte, creo que tuve que escribirlo ya que tengo una situación extraña en la que un botón de opción está anidado de manera diferente que sus cohortes con el mismo nombre.

$('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

Aquí está la solución que funcionó muy bien para mí:

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'); 

Características:

• más rápido. Solo selecciona la lista de casillas de verificación una vez.
• No confía en: marcado. No estoy seguro de si hay un cierto orden en el que se haga clic en "hacer clic" y "cambiar" en todos los navegadores.
• utiliza: radio en lugar de [type = "radio"] que es jQuery recomendado
• establece la clase en el padre para el valor predeterminado del botón de opción.

Espero que ayude!

Answer 6

mi propuesta es:

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

Answer 7

Creo que esta es la mejor y más flexible manera de hacer esto:

olvidar las tablas (google saber muchas razones para eso) y utilizar las envolturas como a continuación

<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 CSS como esto

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

y el uso de este script que puede hacer exactamente lo mismo que desea

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

no me gusta usar filtro() y encontrar() porque utilizan recursos innecesarios en este caso.