在網(wǎng)頁中填寫表單是，單選、多選等input按鈕可以用label的for屬性實(shí)現(xiàn)點(diǎn)擊文字即可實(shí)現(xiàn)選擇。那么如果input radio或者input check旁邊不是文字而是圖片呢？其實(shí)也可以實(shí)現(xiàn)的，不過要加上一點(diǎn)JavaScript代碼了。

1、點(diǎn)擊文字實(shí)現(xiàn)選擇的效果

這個(gè)就是正常效果，不過也先介紹一下。

<input name="a1" id="a1" type="radio" /><label for="a1">西部E網(wǎng)(weste.net)</label>
<input name="a2" id="a2" type="radio" /><label for="a2">騰訊網(wǎng)(qq.com)</label>

這里用到label標(biāo)簽的for屬性，內(nèi)容與input的id相同即可。

2、點(diǎn)擊圖片實(shí)現(xiàn)選擇的效果

<label onclick="this.getElementsByTagName('input')[0].checked=true" style="cursor:hand"><input name="a1" id="a1" type="radio" /><img src="http://www.wsalc.com/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.wsalc.com/images/logo.png"></label>

這樣就實(shí)現(xiàn)了讓圖片也能實(shí)現(xiàn)radio的Label功能。