Sélection automatique du bouton radio lorsque la case est cochée jquery

Question

J'ai une liste de 3 boutons radio avec la 1ère radio sélectionnée au moment du chargement. Le 3ème bouton a un groupe de cases à cocher associées. Lorsque l'une des cases est cochée, le bouton radio correspondant doit être sélectionné automatiquement. Le problème est que cette action ne fonctionne pas dans Chrome de Safari mais fonctionne très bien dans FF, Opera et même sur IE (si IE peut le faire ...). J'utilise ajax, donc quand la page se rafraîchit, elle revient à la première radio sélectionnée, ce qui annule l'action, cela ne se produit que dans Chrome et Safari.

Que se passe-t-il? Quelqu'un me aider ... s'il vous plaît

Voici le code:

jquery + Ajax:

$.ajax({ 
type: "POST", 
dataType: "text", 
url: "ajax/possibleValues.html", 
data: $("form#orderDefinition").serialize(), 
success: function(response){ 
    $('#usercontent .sleeve .toprow').html(response); 
    //alert(response); 
    applyValidation(); 
    radioButtonHighlightSelection(); 
}, 
error: function(response, ioArgs, err) { 
    if (response.status == 601) { 
     sessionTimedOut(); 
    } 
}   
}); 

$("#chooseSource input:radio").each(function(e){ 
    if($(this).is(":checked")){ 
     $(this).parent().addClass("selected"); 
    } 
}); 

$("#chooseSource input:checkbox").each(function(){ 
    if($(this).is(":checked")){ 
     $(this).parent().parent().prev().find("input:radio").attr("checked", true); 
     $(this).parent().parent().prev().find("input:radio").parent().addClass("selected"); 
     $(this).parent().parent().addClass("selected"); 
    } 
}); 

Html:

<form id="optionForm"> 
    <div id="chooseSource"> 
     <div> 
      <input type="radio" id="source1" name="source" value="www" checked="checked" /> 
      <label for="source1">Website</label> 
     </div> 
     <div> 
      <input type="radio" id="source2" name="source" value="mag" /> 
      <label for="source2">Magazine</label> 
     </div> 
     <div> 
      <input type="radio" id="source3" name="source" value="per" /> 
      <label for="source3">Friend</label> 
     </div> 
     <div> 
      <input type="radio" id="source4" name="source" value="oth" /> 
      <label for="source4">Other</label> 
     </div> 
     <div id="cbHolder"> 
      <span> 
       <input type="checkbox" id="sourceCb1" name="sourceCb" value="" /> 
       <label for="sourceCb1">Checkbox item 1 for other</label> 
      </span> 
      <span> 
       <input type="checkbox" id="sourceCb2" name="sourceCb" value="" /> 
       <label for="sourceCb2">Checkbox item 2 for other</label> 
      </span> 
      <span> 
       <input type="checkbox" id="sourceCb3" name="sourceCb" value="" /> 
       <label for="sourceCb3">Checkbox item 3 for other</label> 
      </span> 
     </div> 
    </div> 
</form> 

Merci

Answer 1

http://jsfiddle.net/YuCQR/1/

Trop long pour publier entièrement, mais cela devrait fonctionner dans tous les navigateurs. Voici le JS, j'ai réparé quelques trucs pour vous:

$("#chooseSource input:radio").change(function(e){ 
    $("#chooseSource input:radio").parent().removeClass("selected") 
    $(this).parent().addClass("selected"); 

}); 

$("#chooseSource input:checkbox").change(function(){ 
    //toggle class for this select box 
    $(this).parent().toggleClass("selected"); 

    if($(this).is(":checked")){ 
    //remove all classes from radio boxes 
    $("#chooseSource input:radio").parent().removeClass("selected") 
    $(this).parent().parent().prev().find("input:radio").attr("checked", true); 
    $(this).parent().parent().prev().find("input:radio").parent().addClass("selected"); 

    } 
});​