Ändern Zellklasse auf Optionsfeld ändern

Question

Huge Dank für die Hilfe in diesem Thread - Click td, select radio button in jQuery

Aber jetzt habe ich Mühe, dass es nicht die Klasse der Zelle ändern, auch wenn ich binded habe die ' Änderung‘Trigger in jQuery wie folgt:

$("td input[type=radio]").bind('change click', function() { 

    $('td').removeClass('selected'); 
    $(this).parent('td').addClass('selected'); 

}); 

$("td").click(function() { 

    $('input:radio', this).attr('checked', true); 

}); 

Hoffnung, die Sinn macht. Wenn Sie auf das Optionsfeld klicken oder zwischen ihnen mithilfe der Tastatur wechseln, ändert sich die Klasse der Zelle problemlos. Allerdings, wenn Sie dies auslösen, indem die Zelle klicken sie nicht die Klasse ändern :(

Dank

Answer 1

Weder die click oder change Ereignis wird ausgelöst, wenn Sie Attribute auf einem Element ändern.So müssen Sie es manuell auslösen.Ich bevorzuge es, so viel wie möglich zu verketten, und in diesem Fall können wir die siblings()Funkt verwenden Ion. Wie der Name schon sagt, werden alle Geschwister (in diesem Fall alle anderen <td> Elemente, die die Klasse ausgewählt haben) des aktuellen Elements ausgewählt.

Hier gehen Sie:

$("td input:radio").bind('change click', function(){ 
    $(this).parent('td').addClass('selected').siblings('.selected').removeClass('selected'); 
}); 

$("td").click(function() { 
    $('input:radio', this).attr('checked', 'checked').trigger('change'); 
}); 

Auch nach HTML-Spezifikationen, die checked Attribut nur checked als gültigen Wert. Da jedoch die meisten (wenn nicht alle) Browser dieses Attribut als booleschen Wert analysieren, wobei leer oder nicht existierend bedeutet falsch und jeder andere Wert wahr ist, wird es trotzdem funktionieren, aber ich persönlich bevorzuge es, den Spezifikationen zu folgen.

Answer 2

Versuchen Sie es mit:

$("td input:radio").bind('change click', function() { 

    $('td.selected').removeClass('selected'); 
    $(this).parent('td').addClass('selected'); 

}); 

Es scheint zu funktionieren. JS Fiddle demo