autoselect radio button when checkbox is checked in jquery

Question

Hi All

I have a list of 3 radio buttons with the 1st radio that's selected at load time. The 3rd button has a group of checkboxes related to it. When one of the checkboxes is checked the related radio button should be selected automatically. The problem is that this action doesn't work in Chrome of Safari but works fine in FF, Opera and even on IE (if IE can do it...). I'm using ajax, so when the page refreshes it goes back to the 1st radio being selected, which cancels the action, this only occurs in Chrome and Safari.

What's going on? Someone help me please...

Here's the 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>

Thanks

Answer 1

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

Too long to post entirely, but this should work in all browsers. Here's the JS, I fixed some stuff for you:

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

   }
});​