img图片在label中不兼容【笔记】

img图片在label中不兼容【笔记】 web前端 杭州-小白

哈哈,最近在使用input的时候,发现点击的单选按钮,它旁边不是文字,而是图片的时候,此时不能够点击图片选中那个按钮,如果是文字是可以的.(指的是在IE8以及以下浏览器中)

代码如下

<input type="radio" id="radio1" name="testRadio" />
<label for="radio1"><img src="1.jpg" height="100" /></label>

<input type="radio" id="radio2" name="testRadio" />
<label for="radio2"><img src="1.jpg" height="100" /></label>

此代码在IE8以及以下浏览器出现不兼容的现象。

经过搜索发现有几种方案,大概是这样子的html,css,js 三种 .其中CSS的是使用定位,在label里面套一个空标签,控制大小和图片一样,其实就是控制那个标签的层级做文章而已 ,这种方案比较麻烦撒。。亲们肯定不喜欢这么麻烦滴玩意吧,那么下面,还有一种更简单的。HTML方式 就是在图片上面加一个disabled属性,就搞定勒。符不符合标准就不扯了。能解决就行.

代码如下：

<input type="radio" id="radio3" name="testRadio" />
<label for="radio3"><img src="1.jpg" height="100" disabled="" /></label>

<input type="radio" id="radio4" name="testRadio" />
<label for="radio4"><img src="1.jpg" height="100" disabled="" /></label>

看看就多了一个disabled. 在IE浏览器都正常勒

,信不信那就自己测试吧。。哇咔咔。。这样也可以，太有趣勒。。

在附带一个网上给出的JS解决方案：(测试过可用)

<script type="text/javascript">
window.onload = function() {
	if(document.all && navigator.appVersion.indexOf("MSIE") > -1 && navigator.appVersion.indexOf("Windows") > -1) {
		var a = document.getElementsByTagName("label");
		for(var i = 0, j = a.length; i < j; i++) {
			if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG") {
				a[i].childNodes.item(0).forid = a[i].htmlFor;
				a[i].childNodes.item(0).onclick = function() {
					var e = document.getElementById(this.forid);
					switch(e.type) {
					case "radio":
						e.checked |= 1;
						break;
					case "checkbox":
						e.checked = !e.checked;
						break;
					case "text":
					case "password":
					case "textarea":
						e.focus();
						break;
					}
				}
			}
		}
	}
}
</script>

此js的来源： http://snook.ca/archives/javascript/using_images_as