автоотправить переключатель, если флажок установлен в jQuery

Question

У меня есть список из 3 переключателей с 1-й радиостанцией, выбранной во время загрузки. Третья кнопка имеет группу флажков, связанных с ней. Если установлен один из флажков, соответствующий переключатель будет выбран автоматически. Проблема в том, что это действие не работает в Chrome Safari, но отлично работает в FF, Opera и даже в IE (если IE может это сделать ...). Я использую ajax, поэтому, когда страница обновляется, она возвращается к выбранному 1-му радио, что отменяет действие, это происходит только в Chrome и Safari.

Что происходит? Кто-то мне помочь, пожалуйста ...

Вот код:

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> 

Благодаря

Answer 1

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

Слишком долго, чтобы публиковать сообщения полностью, но это должно работать во всех браузерах. Вот JS, я исправил некоторые вещи для вас:

$("#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"); 

    } 
});​