Highlighting selection with jquery in Chrome and Safari not working

Question

Hi All

Please, can someone tell me why the code below works well in Firefox, Opera and IE, but doesn't work in Chrome and Safari?

When I select any of the checkboxes grouped in the 'fixedPricedAreasHolder' div, I want the 3rd radio button in 'areaTypeGroup' div to be selected and highlighted along with the checkboxes group, to show that they're related. But in Chrome and Safari, only the checkboxes group is highlighted not the radio button above it, which is strange. See code below.

Here is the HTML(don't worry about the html standards):

<div id="areaTypeGroup">                      
  <div>
    <input type="radio" checked="checked" value="Polygon" onchange="updateAvailableAttributes();" name="areaType"> 
    <label>Define a <strong>polygon</strong> on map</label>
  </div>
  <div>
    <input type="radio" value="GB" onchange="updateAvailableAttributes();" name="areaType"> 
    <label>The whole of <strong>Great Britain</strong></label>
  </div>
  <div>
    <input type="radio" value="grouping.COUNTRIES" onchange="updateAvailableAttributes();" name="areaType"> 
    <label>Fixed areas (<strong>countries</strong>) </label>
  </div>

  <div class="fixedPricedAreasHolder">
    <span>
        <input type="checkbox" checked="checked" value="ENGLAND" onchange="updateAvailableAttributes();" name="fixedPriceAreas" id="fixedPriceAreas1">
        <label for="fixedPriceAreas1">England</label>
    </span>
    <span>
        <input type="checkbox" value="SCOTLAND" onchange="updateAvailableAttributes();" name="fixedPriceAreas" id="fixedPriceAreas2" />
        <label for="fixedPriceAreas2">Scotland</label>
    </span>
    <span>
        <input type="checkbox" value="WALES" onchange="updateAvailableAttributes();" name="fixedPriceAreas" id="fixedPriceAreas3">
        <label for="fixedPriceAreas3">Wales</label>
    </span>
    <input type="hidden" value="on" name="_fixedPriceAreas">
  </div><!-- End fixedPricedAreasHolder -->
</div><!-- End areaTypeGroup -->

The CSS:

.selectedRadioBg {
background: #E6E6FA;
margin-left: 5px !important;
padding-left: 5px !important;
}

.selectedCheckboxBg {
background: #E6E6FA;
padding-top: 3px;
margin-left: 5px !important;
padding-left: 5px !important;
margin-top: 0px !important;
}

The jquery:

var radioBtnCollection = $("#areaTypeGroup input:radio");
var radioBtnCheckedCollection = $("#areaTypeGroup input:radio:checked");
var checkBoxCollection = $(".fixedPricedAreasHolder input:checkbox");
var checkBoxCheckedCollection = $(".fixedPricedAreasHolder input:checkbox:checked");

radioBtnCollection.each(function(i, elemRd){
    if(elemRd.checked){
        $(this).parent().addClass("selectedRadioBg");
        $(this).parent().next(".fixedPricedAreasHolder").addClass("selectedCheckboxBg");
    }
    else{
        $(this).parent().removeClass("selectedRadioBg");
    }

    checkBoxCollection.each(function(i, elemCb){
        if(elemCb.checked){
            $(elemRd).parent().removeClass("selectedRadioBg");
            $(this).parent().parent().prev().find(":radio").attr("checked", true);
            $(this).parent().parent().prev().addClass("selectedRadioBg");
            $(this).parent().parent().addClass("selectedCheckboxBg");
        }
    });
});

Please advice me on this. Thanks in advance.