我的代码在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('div_id_question_220'),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('div_id_question_220'),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>
答案 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 {}
}
}