IE下单选按钮隐藏后点击对应label无法选中的bug解决
 项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。 
 代码示例:
 
 
 
 
 
 <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);
 
}
 
 目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
 
                    
                
                
            
        
浙公网安备 33010602011771号