當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > 單擊文字實(shí)現(xiàn)單選按鈕的選定JS代碼怎么寫

單擊文字實(shí)現(xiàn)單選按鈕的選定JS代碼怎么寫

2012/11/1 11:16:35作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

單擊文字實(shí)現(xiàn)單選按鈕的選定JS代碼怎么寫

【實(shí)例描述】

在網(wǎng)頁(yè)的基本控件中，單選按鈕控件是不包含文字的，在頁(yè)面單選按鈕后面的文字其實(shí)只是頁(yè)面的布局，兩者之間實(shí)際上沒(méi)有任何關(guān)系。但在用戶看來(lái)，兩者是一體的。本例的目的就是將兩者設(shè)計(jì)為一體，實(shí)現(xiàn)選擇文字的同時(shí)選中單選按鈕。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（wangbatian.cn）</title>
</head>
<body>
<br>
<input type="radio" name="myLike" value="Like1" id="Like1">
<label for="Like1"> 體育運(yùn)動(dòng):NBA</label> <br>
<input type="radio" name="myLike" value="Like2" id="Like2">
<label for="Like2"> 休閑運(yùn)動(dòng):Golf</label>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是label元素的“for”屬性。此屬性用來(lái)設(shè)置label是為誰(shuí)服務(wù)的，屬性的值必須是被服務(wù)控件的id。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：單擊文字實(shí)現(xiàn)單選按鈕的選定 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： 按鈕  JS代碼