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

Question

I tried for days to get this to work in IE, and ultimately gave up by presenting the user with an alert window warning users that the form does not fully work in IE. Yet, people are still using IE to fill out the form and I'm having to email back and forth with them to finish their registration, so I'd like to see if I can actually fix the original problem. I have a long registration form for an event here:

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

I decided to handle the length of the form by revealing form elements when the user clicks various checkboxes, eg the housing section at the very bottom of the form. Here's the javascript:

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

here's the relevant 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;}

and here's an example of the html:

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

Does anyone know how to make this work in IE? I searched Stack Overflow awhile back when I initially worked on this. I'd tried a number suggestions that were answers to similar but slightly different problems, but none of them had worked for me (I'd tell you what I tried, but cannot remember now).

Thanks, Rob

UPDATE: I confirmed myself that the code WORKS in IE 9 & 10 (despite what other testers were telling me). So this question is specifically for IE 8 and below. Apparently, some of my users are still using outdated versions of IE. In fact, one preferred printing out the screen shots I sent her to mail me the registration instead of installing any other up-to-date browser! sigh

Answer 1

first give a id to input:

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

then use this jquery code:

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