IE下单选按钮隐藏后点击对应label无法选中的bug解决
项目中，有时候填写表单我们的选项会隐藏掉radio或者checkbox，而只显示给用户对应的文字选择，如果用户点击label选择时，在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态，而在IE下则不会发生变化。 注意，需要指定表单元素的id属性然后使用label的for属性绑定控件。 代码示例： <input type="radio" name="gender" id="gender1" value="男" checked="checked" /> <label for="gender1">男</label> <input type="radio" name="gender" id="gender2" value="女" /> <label for="gender2">女</label> 通过CSS设置display:none 或者 visibility: hidden隐藏掉radio按钮，则当点击label切换选择状态时，对应的按钮实际上是未被改变状态。解决方法有几种： 1.通过javascript脚本来再次操作DOM保证选择状态 $("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); }); 2.不使用display:none，通过position属性定位到可视区域外，避开问题。 position: absolute; top: -999px; left: -999px; 3.通过z-index/width或透明度opacity将元素隐藏掉。 input{ position: absolute; z-index: -1; } 或者是 input{ width: 0; } 或者是 input{ -webkit-opacity:0; -moz-opacity:0; opacity:0; filter:alpha(opacity:0); } 需要提醒的是，label的for属性是内联元素，其对应的js属性为htmlFor，例如可以这样访问或设置for属性值。document.getElementById("xxx").htmlFor="inputid";; 目前IE6-IE9都有这样的问题，不知道IE以后会不会和标准浏览器的行为看齐。希望吧！！
