переключатель автоматического выбора, когда флажок установлен в 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");

   }
});​