项目中,有时候填写表单我们的选项会隐藏掉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以后会不会和标准浏览器的行为看齐。希望吧!!

IE下单选按钮隐藏后点击对应label无法选中的bug解决的更多相关文章

  1. 点击文字label同时选中checkbox radio

    在做网页的时候一般会有一个需求:点击一段文字信息的同时选中某个checkbox 旧处理方式是在这段文字上加上点击事件触发checkbox的选中事件 //jq中://选中 $("#ID&quo ...

  2. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  3. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  4. 关于easyui隐藏后数据不能刷新??

    原因是div用display属性隐藏后不能重新加载table数据 解决方法:使用hide()方法在初始化时隐藏 $("#two").hide(); //点击按钮隐藏与显示表单域 $ ...

  5. Android按下home键后重新打开app进入主activity的问题

    问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...

  6. svn下copy项目后定位到新资源库,产生不同版本号的方法

    转载于http://blog.csdn.net/u012990533/article/details/44776465 最近这两天,公司要做国际化的开发,本打算要用struts2内置的i18n拦截器做 ...

  7. Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决

    Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决 http://blog.csdn.net/net_boy/archive/2009/11/05/477 ...

  8. Android安装应用后点击&quot;打开&quot;(Open)带来的问题及解决方案

    MainActivity例如以下: package cc.cc; import android.app.Activity; import android.content.Intent; import ...

  9. dex方法隐藏后的反编译和运行时 效果

    隐藏smali方法后 java源码: int b = fun2(); baksmali解释为: invoke-virtual                  {v1}, <int MainAc ...

随机推荐

  1. Java线程的几种状态

    一. 线程状态类型1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运 ...

  2. MySQL5.5.28启动错误 The server quit without updating PID file

    今天重新安装了一次 MySQL5.5.28 ,但启动的时候老是报错 Starting MySQL.. ERROR! The server quit without updating PID file ...

  3. hihoCoder挑战赛11 A 随机斐波那契

    算了前三项.....发现是个大水题...   #include<stdio.h> int main() { int n; while (~scanf("%d", &am ...

  4. 老司机的奇怪noip模拟T1-guanyu

    1. 关羽(guanyu.cpp/c/pas )[问题描述]xpp 每天研究天文学研究哲学,对于人生又有一些我们完全无法理解的思考.在某天无聊学术之后, xpp 打开了 http://web.sang ...

  5. SVD分解技术详解

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  6. String类之endsWith方法--->检测该字符串以xx为结尾

    endsWith(XX)方法是java内置类String类的一个内置方法,我们直接拿来用即可了,下边是api说明:检测该字符串以xx为结尾,结果返回布尔值 public class Demo { pu ...

  7. 8.多线程和Socket通信

    一.多线程 1.进程的概念: 进程就是应用程序的执行实例,有独立的内存空间和系统资源.当一个应用程序没有执行的时候,它就不是一个进程.   2.进行的特征: (1)动态性:动态产生动态消亡. (2)并 ...

  8. OGRE HelloWorld

    #include <OGRE/ExampleApplication.h> #include <OGRE/Ogre.h> class EnvMapApplication : pu ...

  9. js转义

    $('select[name="conditions[\'examQuestion.examTypeId_int\'].value"]');JS中使用 \' 作为 ' 转义

  10. A - 小彭玉的扫荡食堂计划

    A - 小彭玉的扫荡食堂计划 Time Limit: 20000/10000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) ...