让图片也能实现radio的Label功能

在网页中填写表单是，单选、多选等input按钮可以用label的for属性实现点击文字即可实现选择。那么如果input radio或者input check旁边不是文字而是图片呢？其实也可以实现的，不过要加上一点JavaScript代码了。

1、点击文字实现选择的效果

这个就是正常效果，不过也先介绍一下。

<input name="a1" id="a1" type="radio" /><label for="a1">西部</label>
<input name="a2" id="a2" type="radio" /><label for="a2">腾讯网</label>

这里用到label标签的for属性，内容与input的id相同即可。

2、点击图片实现选择的效果

<label onclick="this.getElementsByTagName('input')[0].checked=true" style="cursor:hand"><input name="a1" id="a1" type="radio" /><img src="http://www.w.net/images/logo.png"></label>
<label onclick="this.getElementsByTagName('input')[0].checked=true" style="cursor:hand"><input name="a1" id="a1" type="radio" /><img src="http://www.w.net/images/logo.png"></label>

这样就实现了让图片也能实现radio的Label功能。