一组颜色单选按钮,选中其中一个时,下面的颜色示例div的背景就显示出相应的颜色。

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <title> new document </title> 
  5.     </head> 
  6.  
  7.     <body> 
  8.     <script type="text/javascript"> 
  9.         function f1() 
  10.         { 
  11.             document.getElementById("myDiv").style.backgroundColor = "red" 
  12.         } 
  13.         function f2() 
  14.         { 
  15.             document.getElementById("myDiv").style.backgroundColor = "green" 
  16.         } 
  17.         function f3() 
  18.         { 
  19.             document.getElementById("myDiv").style.backgroundColor = "blue" 
  20.         } 
  21.         function f4() 
  22.         { 
  23.             document.getElementById("myDiv").style.backgroundColor = "yellow" 
  24.         } 
  25.         function f5() 
  26.         { 
  27.             document.getElementById("myDiv").style.backgroundColor = "orange" 
  28.         } 
  29.     </script> 
  30.     <p>选择颜色:</p> 
  31.     <label><input name="color" type="radio" value="红" onclick="f1()" /></label> <br /> 
  32.     <label><input name="color" type="radio" value="绿" onclick="f2()" />绿</label> <br /> 
  33.     <label><input name="color" type="radio" value="蓝" onclick="f3()" /></label> <br /> 
  34.     <label><input name="color" type="radio" value="黄" onclick="f4()" /></label> <br /> 
  35.     <label><input name="color" type="radio" value="橙" onclick="f5()" /></label> <br /> 
  36.     <p>颜色示例:</p> 
  37.     <div id="myDiv" style="width:150px;height:75px;"></div> 
  38.     </body> 
  39. </html> 

效果如下图