IE JS中的单选按钮顺序反转

时间:2011-03-22 20:07:16

标签: javascript internet-explorer firefox onclick radio-button

我的代码在FF,Safari和Chrome中正常运行,但结果在IE中反转。我正在显示是/否单选按钮问题,然后根据选择我显示'是后续'或'无后续'。    'position_1'是显示是否选择了第一个单选按钮选项的元素...

#My onclick js


function ShowHide(parent, position_1, position_2) {
    if (parent[0].checked) 
        {
            ShowIt(position_1); 
            HideIt(position_2);
        }
    else
        {
            if (parent[1].checked)
                {
                    HideIt(position_1);
                    ShowIt(position_2);}    
                else {}
        }       
}
#Additional JS
function ShowIt(childs) {
    //show it
    for (i=0;i<childs.length;i++) {
        jQuery("#"+childs[i]).css('margin-left','50px').css('background-color','#F2F2F2').slideDown();
    }
}
function HideIt(childs) {
    //hide it
    for (i=0;i<childs.length;i++) {
        jQuery("#"+childs[i]).slideUp();
    }
}

上述代码适用于FF,Chrome和Safari。但是在IE中使用上面的代码却恰恰相反。例如,如果我选择“position_1”或首先从左侧选择它,则显示“position_2”的子输入,反之亦然。 如果我这样切换位置......

function ShowHide(parent, position_1, position_2) {
    if (parent[0].checked) 
        {
            ShowIt(position_2); 
            HideIt(position_1);
        }
    else
        {
            if (parent[1].checked)
                {
                    HideIt(position_2);
                    ShowIt(position_1);}    
                else {}
        }       
}

IE正常工作,然后FF,Chrome和Safari都会被颠倒过来。似乎我的无线电选项订购与IE相反。有没有更好的方法可以在所有浏览器中使用?

更新

HTML片段(仅供参考我使用django软件包以单一形式显示表单)

<div id="div_id_question_181" class="ctrlHolder">
                    <label for="id_question_181">                    
                Is the Dog Friendly?*
            </label>
        <label for="id_question_181_0"><input name="question_181" onchange="ShowHide(question_181,new Array(&#39;div_id_question_220&#39;),new Array());" type="radio" class="radioselect" value="1" id="id_question_181_0" /> Yes</label> <label for="id_question_181_1"><input name="question_181" onchange="ShowHide(question_181,new Array(&#39;div_id_question_220&#39;),new Array());" type="radio" class="radioselect" value="0" id="id_question_181_1" /> No</label> 
   </div>
   <div id="div_id_question_220" class="ctrlHolder">
            <label for="id_question_220">                    
                Did you pet it?
            </label>
        <label for="id_question_220_0"><input value="1" type="radio" class="secondary_field triggeron_181 choice_0 radioselect" name="question_220" id="id_question_220_0" /> Yes</label> <label for="id_question_220_1"><input value="0" type="radio" class="secondary_field triggeron_181 choice_0 radioselect" name="question_220" id="id_question_220_1" /> No</label> 
   </div>

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案Here,它可以解决松散的问题,这就是我所做的。我改变的唯一一件事是我编辑了ShowHide函数。

function ShowHide(parent, position_1, position_2) {
var radioLength = parent.length;
for(var i = 0; i < radioLength; i++) {
    if(parent[i].checked) {
        var radio_value = parent[i].value;
    }
}
if (radio_value == 0) 
    {
        ShowIt(position_1); 
        HideIt(position_2);
    }
else
    {
        if (radio_value == 1)
            {
                HideIt(position_1);
                ShowIt(position_2);}    
            else {}
    }       

}