项目中,有时候填写表单我们的选项会隐藏掉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. Sublime Text 2

    常用功能: 安装Package Control:https://sublime.wbond.net/ 多行选择.多行编辑鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) ...

  2. document.body 和 document.documentElement 的区别

    document.body 和 document.documentElement 的区别 : www.cnblogs.com/scy251147/archive/2011/04/10/2011420. ...

  3. PAT 团体程序设计天梯赛-练习集 L2-003. 月饼

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...

  4. jQuery插件实现左右无缝轮播

    前段时间学习jQuery的时候,在网上找了个SuperSlide插件,做轮播图demo,感觉对于新人而言,还是挺容易上手的,代码量也少. 直接贴代码吧. 1.HTML <!DOCTYPE htm ...

  5. hdu_5862_Counting Intersections(扫描线)

    题目链接:hdu_5862_Counting Intersections 题意: 给你与坐标轴平行的线段,问你交点数 题解: 实质就是扫描线,这里我用树状数组来记录,所有线段按X坐标排序,遇到横线段的 ...

  6. openwrt 串口无法登陆

    打印这个消息后串口无法进行交互 procd: - init complete - 主要问题是 /etc下inittab脚本中 ::sysinit:/etc/init.d/rcS S boot::shu ...

  7. storm的并发机制

    storm的并发机制 storm计算支持在多台机器上水平扩容,通过将计算切分为多个独立的tasks在集群上并发执行来实现. 一个task可以简单地理解:在集群某节点上运行的一个spout或者bolt实 ...

  8. 站在Java的角度看LinkedList

    站在Java的角度看,玩队列不就是玩对象引用对象嘛! public class LinkedList<E> implements List<E>, Deque<E> ...

  9. 创建UIView对象

    创建一个UIView对象分四步: 1.创建一个view对象,并设置其大小 UIView *view = [[UIView alloc] initWithFrame:CGRectMake:(CGFloa ...

  10. wc的用法

    wc -c filename:显示一个文件的字节数 wc -m filename:显示一个文件的字符数 wc -l filename:显示一个文件的行数 wc -L filename:显示一个文件中的 ...