如何隐藏&取消隐藏Javascript&使用Internet Explorer中的复选框的CSS

时间:2013-06-20 15:43:11

标签: javascript css block hidden

我尝试了几天让它在IE中工作,并最终通过向用户提供一个警告窗口来警告用户该表单在IE中不能完全正常工作而放弃。然而,人们仍然使用IE来填写表格,我不得不与他们来回发送电子邮件以完成他们的注册,所以我想看看我是否能够真正解决原始问题。我在这里有一个很长的注册表格:

http://rhythmshuffle.com/RS2013/Register.html

当用户点击各种复选框时,我决定通过显示表单元素来处理表单的长度,例如表格底部的住房部分。这是javascript:

function togglehide(thiselem) {
  var item = document.getElementById(thiselem);
  if (item) {if (item.className == 'unhidden') {item.className='hidden';} else {item.className='unhidden';}}
}

这是相关的CSS:

.hidden {display: none; overflow: hidden; border: none; text-decoration: none; background: transparent;}
.unhidden {display: block; overflow: auto; border: none; text-decoration: none; background: transparent;}

这是html的一个例子:

<input type="checkbox" name="housing" value="yes" onClick="javascript:togglehide('housingrequest')"/>
<div id=housingrequest class=hidden>
  whatever - more form elems...
</div>

有谁知道如何在IE中完成这项工作?当我最初研究这个时,我搜索了Stack Overflow一段时间。我尝试了一些建议,这些建议是类似但略有不同的问题的答案,但它们都没有为我工作(我告诉你我尝试了什么,但现在不记得了)。

谢谢, 罗布

更新:我确认自己IE 9中的代码WORKS&amp; 10(尽管其他测试人员告诉我)。所以这个问题专门针对IE 8及以下版本。显然,我的一些用户仍在使用过时的IE版本。事实上,一个首选打印屏幕截图我发送给她邮寄注册而不是安装任何其他最新的浏览器! 叹息

1 个答案:

答案 0 :(得分:0)

首先输入id:

<input id="test" type="checkbox" name="housing" value="yes"/>
<div id="housingrequest" class="hidden">
  whatever - more form elems...
</div>

然后使用这个jquery代码:

$("input#test").click(function(){
    if($(this).is(":checked")){
        $("div#housingrequest").show();
    }
    else{
        $("div#housingrequest").hide();
    }
});