jQuery agregar/eliminar clase css en la radio seleccionada

Question

He leído algunas soluciones aquí, pero mi problema es lo suficientemente diferente como para que no funcionen. Básicamente, si el botón de opción está marcado, agrega una clase css al div principal. Si la radio no está marcada, elimine la clase css. Suena simple?

Tengo más de un grupo de botones de opción, es decir, habrá múltiples botones de opción seleccionados a la vez. Cada grupo de botones de radio también se encuentra en diferentes partes de la página separadas por otros html.

Esto es lo que ocurrió:

$(document).ready(function() { 
    $('input').click(function() { 
     if ($('input:not(:checked)')) { 
      $('div').removeClass('style1'); 
     } 
     if ($('input').is(':checked')) { 
      $(this).parent().addClass('style1'); 
     } 


    }); 
}); 

Creo que estoy en el camino correcto con la entrada: no (: activada), pero en la siguiente línea que elimina style1 de todos los elementos div en lugar de verificar si está marcado otro botón secundario botón de selección secundario.

Supongo que lo que estoy preguntando es cómo escribo un script que cuando se hace clic en un botón de opción, agrega una clase css al padre y luego encuentra todas las etiquetas div en la página que tiene un hijo de entrada. Si la entrada secundaria divs no está marcada, elimine la clase css. Entonces, si un div tiene un elemento de entrada hijo y está marcado, no elimine la clase css de las entradas div.

Espero que tenga sentido.

Answer 1

Por qué no usar lo siguiente: http://jsfiddle.net/Q2bzT/

$(document).ready(function() { 
    $('input').click(function() { 
     $('input:not(:checked)').parent().removeClass("style1"); 
     $('input:checked').parent().addClass("style1"); 
    });  
});​ 

Answer 2

Asumiendo que sus botones de radio utilicen la propiedad name para agruparlos adecuadamente, cuando cambie uno, puede encontrar las radios con el mismo nombre, eliminar la clase y luego agregar la clase a la que se activó.

Pruébelo:http://jsfiddle.net/U2AAQ/

$(document).ready(function() { 
    $(':radio').change(function() { 
     $(':radio[name=' + this.name + ']').parent().removeClass('style1'); 
     $(this).parent().addClass('style1'); 
    }); 
});​ 

Answer 3

tuve un problema similar, pero que necesitaba para apuntar de label en lugar de uno de los padres en el botón de radio div elemento. También necesitaba asegurarme de que los otros elementos label relacionados no tuvieran la clase.

Esto es lo que ocurrió con base en la respuesta de @ user113716:

HTML

código MVC eliminado por lo que sólo HTML en este ejemplo

<ol class="list-group"> 
    <li class="list-group-item"> 
     <div class="input-group"> 
      <label for="choice_ChoiceId" class="form-control">ChoiceDescription</label> 
      <span class="input-group-addon"> 
       <input type="radio" id="choice_ChoiceId" value="choiceValue" name="choiceName" required /> 
      </span> 
     </div> 
    </li> 
</ol> 

jQuery

$(':radio').click(function() { 
    var _groupName = $(this).attr('name'), 
     _radioId = $(this).attr('id'), 
     _radioGroup = $(':radio[name="' + _groupName + '"]'); 

    //remove class from all labels for this group of radio buttons 
    _radioGroup.each(function(){ 
     $('label[for*="' + $(this).attr('id') + '"]').removeClass('style1'); 
    }); 

    //add the class to the selected radio button 
    $('label[for*="' + _radioId + '"]').addClass('style1'); 
}); 

Answer 4

JavaScript

'use strict'; 
var o = 'label.input-check, label.input-radio'; 
$(o).find('input').change(function() { 
    $(o).find('input').filter('input[name="' + (this).name + '"]').each(function() { 
     $(this).parent(o).toggleClass('checked', (this).checked); 
    }); 
}).trigger('change'); 

Demostración:http://jsfiddle.net/3uwp9c2n/

Sólo optimizar si es necesario.