IE下单选按钮隐藏后点击对应label无法选中的bug解决

发表于:2015-8-27 10:56

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:billliu    来源:51Testing软件测试网采编

  项目中,有时候填写表单我们的选项会隐藏掉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以后会不会和标准浏览器的行为看齐。希望吧!!
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号