前一陣子在專案中,為了讓使用者可以更清楚的知道自己所選取的項目為何,所以筆者必須將 RadioButtonList 中被選取的選項加上粗體的樣式。
本想應該是很簡單,只要把 RadioButtonList 中的項樣的樣式設定即可,但是
竟發現 RadioButtonList 並未提供針對其每個選項設定樣式的功能。XD…
也可以從產生出來的網頁的原始碼發現 RadioButtonList 產生的程式碼為 <label for=”……”>XXX</label> 的寫法。如下:
 
<table id="RadioButtonList1" border="0">
	<tr>
	  <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="選項一" /><label for="RadioButtonList1_0">選項一</label></td>
	</tr>
        <tr>
	  <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="選項二" /><label for="RadioButtonList1_1">選項二</label></td>
	</tr>
        <tr>
	  <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="選項三" /><label for="RadioButtonList1_2">選項三</label></td>
	</tr>
</table>

 


試了一些方法後,最後筆者用一個 div 將 RadioButtonList 放在其中,再用 JavaScript 來描這個 div 中的 label 的 Tag


程式碼如下:


 

    function MakeBold(divObj, elementID) {
        var labels = divObj.getElementsByTagName("label");
        for(var i=0;i<labels.length;i++) 
        {
            if(labels.item(i).htmlFor == elementID) 
            {
                labels.item(i).style.fontWeight="bold";
            }
            else
            {
                labels.item(i).style.fontWeight="normal";
            }
        }
    }

 


P.S. 請記得在每個選項加入 onclick 的事件來觸發它。


Hope this helps.

anISV 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • elikh
  • 好-康-達-人-誌 痞客幫開張

    版主大大你好,經過此地跟你問候一聲
    好-康-達-人-誌 痞客幫開張了
    有空請大家多來我的部落格走走^^
    http://elikh.pixnet.net/blog

    1.新增旗津特輯 萬二萬三都在旗津
    2.網站也有自己的貼紙了~~~歡迎大家來串
    一起報好康省錢又賺錢
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消