慢步在雲端..

前一陣子在專案中，為了讓使用者可以更清楚的知道自己所選取的項目為何，所以筆者必須將 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.