一組顏色單選按鈕，選中其中一個時，下面的顏色示例div的背景就顯示出相應的顏色。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title> new document </title>
- </head>
- <body>
- <script type="text/javascript">
- function f1()
- {
- document.getElementById("myDiv").style.backgroundColor = "red"
- }
- function f2()
- {
- document.getElementById("myDiv").style.backgroundColor = "green"
- }
- function f3()
- {
- document.getElementById("myDiv").style.backgroundColor = "blue"
- }
- function f4()
- {
- document.getElementById("myDiv").style.backgroundColor = "yellow"
- }
- function f5()
- {
- document.getElementById("myDiv").style.backgroundColor = "orange"
- }
- </script>
- <p>選擇顏色：</p>
- <label><input name="color" type="radio" value="紅" onclick="f1()" />紅</label> <br />
- <label><input name="color" type="radio" value="綠" onclick="f2()" />綠</label> <br />
- <label><input name="color" type="radio" value="藍" onclick="f3()" />藍</label> <br />
- <label><input name="color" type="radio" value="黃" onclick="f4()" />黃</label> <br />
- <label><input name="color" type="radio" value="橙" onclick="f5()" />橙</label> <br />
- <p>顏色示例：</p>
- <div id="myDiv" style="width:150px;height:75px;"></div>
- </body>
- </html>
效果如下圖：
