Hide selectable radios in IE

by Barney Carroll

HTML

<form>
<fieldset><legend>Options</legend>
      <ul>
        <li>
            <label for="option1">
                <input type="radio" name="A" id="option1" onclick="focusThis();">
                Option 1
            </label> 
        	<label for="field1">
                Field 1
            </label>
            <input id="field1"/>
        </li>
        
        <li>
            <label for="option2">
                <input type="radio" name="A" id="option2" onclick="focusThis();">
                Option 2
            </label>
        
            <fieldset id=""><legend></legend>
              <ul>
                <li><label for="field2">Field 2</label> <input id="field2"/></li>
                  <li><label for="field3">Field 3</label> <input id="field3"/></li>
              </ul>
            </fieldset>
         </li>
      </ul>
  </fieldset>
</form>

CSS

ul li { list-style: none }

label {
    position: relative;
}

input[type=checkbox], input[type=radio]  {
    opacity: 0;
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

JavaScript

function focusThis() {
		var option1 = $('#option1').is(':checked');
		if (option1) {
			//alert(1);
			$('#field1').focus();
		} else {
			//alert(2);
			$('#field2').focus();
		}
	}