jQuery aggiungi/rimuovi classe css sulla radio selezionata

Question

Ho letto alcune soluzioni qui, ma il mio problema è abbastanza diverso da quelle in cui queste non funzionano. Fondamentalmente se il pulsante radio è selezionato, aggiungi una classe css al div padre. Se la radio non è selezionata, rimuovere la classe css. Sembra semplice?

Ho più di un gruppo di pulsanti di opzione, quindi in altre parole, saranno selezionati più pulsanti di opzione alla volta. Ogni gruppo di pulsanti di opzione si trova anche su diverse parti della pagina separate da un altro html.

Ecco quello che mi si avvicinò con:

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


    }); 
}); 

Credo di essere sulla strada giusta con l'ingresso: non (: selezionata), ma sulla riga successiva rimuove style1 da tutti gli elementi div invece di controllare se è stato selezionato un altro pulsante di opzione radio figlio secondario.

Credo che quello che sto chiedendo sia come scrivo uno script che quando si fa clic su un pulsante di opzione, aggiungere una classe css al genitore e quindi trovare tutti i tag div nella pagina che hanno un figlio di input. Se l'input figlio div non è selezionato, rimuovere la classe css. Quindi se un div ha un elemento input figlio e viene controllato, non rimuovere la classe css dal div degli input.

Spero che abbia senso.

Answer 1

Perché non utilizzare il seguente: http://jsfiddle.net/Q2bzT/

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

Answer 2

Supponendo che i pulsanti di opzione utilizzino la proprietà name per raggrupparli correttamente, quando si cambia, è possibile trovare le radio con lo stesso nome e rimuovere la classe, quindi aggiungere la classe a quella che è stata attivata.

Provalo:http://jsfiddle.net/U2AAQ/

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

Answer 3

ho avuto un problema simile, ma avevo bisogno di indirizzare il label invece di un genitore pulsante div elemento. Avevo anche bisogno di assicurarmi che gli altri elementi relativi label non avessero la classe.

Ecco cosa mi è venuta sulla base di @ user113716 risposta:

HTML

codice MVC rimosso in modo c'è solo HTML, in questo esempio

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

Demo:http://jsfiddle.net/3uwp9c2n/

Proprio ottimizzare se avete bisogno.