Question

我有一个3个单选按钮的列表，其中第一个收音机是在加载时选择的。第3个按钮有一组与之相关的复选框。选中其中一个复选框后，应自动选择相关的单选按钮。问题是这个动作在Safari的Chrome中不起作用，但在FF，Opera甚至在IE上工作正常（如果IE可以做到......）。我正在使用ajax，所以当页面刷新时会返回到被选中的第一个收音机，这会取消操作，这只发生在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");

   }
});

在jquery中选中复选框时自动选择单选按钮

1 个答案: