Pulsante Radio controllato lo stato con jQuery

Question

Ecco il codice di base

<ul>
 <li>
  <input type="radio" name="r" value="a" id="a" checked="checked" />
  <label for="a">A</label>
 </li>
 <li>
  <input type="radio" name="r" value="b" id="b" />
  <label for="b">B</label>
 </li>
</ul>

Quindi ho bisogno di avere il lavoro come:

1 Fare clic sul e verificare se il fratello è selezionata = "controllati" class quindi aggiungere "selezionato" per il genitore

2 Fare clic sul e verificare se il fratello è non selezionato quindi aggiungere controllata = "controllato" per il fratello e aggiungere "selezionato" classe per il genitore

rimuovere anche tutti i altro "controllato" e "selezionato" nella

Mi può per favore!

aiutare

Answer 1

Cliccando sull'etichetta deve controllare automaticamente i pulsanti di opzione nel browser. Quindi, basta fare aggiungere un evento click per l'etichetta / input che imposterà la classe sulla Li.

Qualcosa del genere dovrebbe funzionare:
HTML (ho appena id="mylist" aggiunto)

<ul id="mylist">
 <li>
  <input type="radio" name="r" value="a" id="a" checked="checked" />
  <label for="a">A</label>
 </li>
 <li>
  <input type="radio" name="r" value="b" id="b" />
  <label for="b">B</label>
 </li>
</ul>

JavaScript

$(function() {
 $("#mylist input, #mylist label").click(function() {
  $("#mylist li").removeClass("selected");
  $(this).parent().addClass("selected");
 });
});

Answer 2

Dal momento che si sta già utilizzando label con l'attributo for ci realtà dovrebbe essere alcun bisogno di collegare un evento all'elemento label, a meno che non è necessario fare i conti con IE6 facendovi sei la vita difficile.

$(':radio[name="r"]').change(function(){
    $(this).parent('li').addClass('selected').siblings().removeClass('selected');
}).filter(':checked').change();

La documentazione per: change()

See: http://www.jsfiddle.net/yijiang/mzPk9/

Answer 3

Sono sicuro che questo non è il modo più elegante, ma con una modifica alla marcatura (l'aggiunta di classe 'a' e 'b' al vostro li -. Sostanzialmente lo stesso valore come l'id del elem della radio contenuta) qui andiamo:

$('label').click(function(){
    // if the radio is already checked
    if ($('#'+$(this).attr('for')).attr('checked') == 'checked') {
        $('ul li').removeClass('selected');  // remove previous selected items
        $('.'+$(this).attr('for')).addClass('selected'); // add new selected item
    } else {
        // radio not checked
        $('#'+$(this).attr('for')).attr('checked','checked'); // check radio (altough this should be automatic, without js
        $('ul li').removeClass('selected'); // clear previous selected items
        $('.'+$(this).attr('for')).addClass('selected'); // add new selected item
    }
});

Per la velocità, vorrei suggerire di aggiungere un id al ul, dire "lista" e hanno la modifica del codice da

$('label').click(function(){

a

$('#list label').click(function(){

Inoltre, da:

$('ul li').removeClass('selected');  // remove previous selected items

a

$('#list li').removeClass('selected');  // remove previous selected items

In bocca al lupo!