在网页中填写表单是,单选、多选等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功能。