Question

I have code that acts properly in FF, Safari and Chrome, however the result is reversed in IE. I am displaying a yes/no radio button question, then based on the selection I show the ‘yes followups’ or the ‘no followups’.
‘position_1’ are the elements to show if the first radio button option is selected…

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

The above code works in FF, Chrome, and Safari as stated. However in IE with the above code it does the opposite. For instance if what I perceive as ‘position_1’, or first from left, is selected it shows the child inputs for ‘position_2’ and vice versa.
If I switch up the positions like so…

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 works and then FF, Chrome, and Safari are reversed. It appears that my ordering for the radio options is opposite for IE. Is there a better way to do this that will work across all browsers?

UPDATE

HTML Snippet (FYI I an using django package uni-form to show form)

<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>

Answer 1

I found a solution Here that works and in an effort to tie up loose ends here’s what I did. The only thing that I changed, is I edited the ShowHide function like so.

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 {}
    }       

}