Radio jQuery onchange alternar clase de elemento padre?

Question

Por favor, echar un vistazo a lo siguiente:

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

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

marcado lookslike algo como siguiente

<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 la etiqueta TD, lo cual está bien. Pero si cambio de la selección a otro que se suma el verde a otro pero tampoco quitar el verde de la radio seleccionada previamente.

¿Cómo hacer que funcione de manera que la selección de una opción de radio cambia la clase de su padre para TD verde y seleccionar otro restablecerá todos además de añadir verde a sólo el recién seleccionado!

Puede también ser hecho para cambiar la clase de su primer TD anterior, que contiene "un poco de texto 3", etc ??

Gracias.

Answer 1

Trate algo como esto:

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

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

Por otra parte, 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

No debe utilizar el evento de cambio () en los botones de radio y casillas de verificación. Se comporta un poco a través de los navegadores poco fiables e inconsistentes (que causa problemas en todas las versiones de IE)

Utilice el evento click () en su lugar (no se preocupe acerca de la accesibilidad, ya que el evento de clic también se disparará si se activa / seleccionar un botón de opción con el teclado)

Y como los otros aquí señalaron, al 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: conforme a lo solicitado en el comentario, también cambiar la td anterior:

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

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

o, mejor aún, 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 3

Prueba esto:

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

Answer 4

Me acabo de escribir una solución que no importa cuán profundamente anidados son los botones de radio, sólo se utiliza el atributo de nombre de los botones de radio. Esto significa que el código funcionaría sin modificaciones en cualquier lugar, creo - que tenía que escribirlo ya que tengo una extraña situación en que un botón de opción se anida 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

mi propuesta es:

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

Answer 6

Esta es 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. Sólo lista de casillas de verificación selecciona una vez.
• no se basa en: comprobado. No estoy seguro de si hay un cierto orden en el que "hace clic" y "transformados" se ejecutará a través de navegadores.
• utiliza: de radio en lugar de [type = "radio"], que es jQuery recomienda
• establece la clase de los padres para el valor por defecto del botón de opción.

Espero que esto ayude!

Answer 7

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

olvidar las tablas (google sabe muchas razones para ello) y el uso de 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.