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

【问题标题】：Radio Button order reverse in IE JSIE JS中的单选按钮顺序反转
【发布时间】：2011-03-25 00:22:20
【问题描述】：

我的代码在 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>

【问题讨论】：

你能发布一个 HTML sn-p 来配合你的 JS。
你能把将 position_1 和 position_2 传递到你的 ShowHide() 函数中的代码贴出来吗？一些随之而来的 HTML 也可能会有所帮助。

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

【解决方案1】：

我找到了一个有效的解决方案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 {}
    }

}

【讨论】：