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

2011-05-06 17:57:24来源:西部e网作者:

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

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

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

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

<input name="a1" id="a1" type="radio" /><label for="a1">西部E网(weste.net)</label>
<input name="a2" id="a2" type="radio" /><label for="a2">腾讯网(qq.com)</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.weste.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.weste.net/images/logo.png"></label>

\

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

赞助商链接: