通过单选按钮改变div的边框颜色

有2组单选按钮<div class="pro" >
<div class="pro_top">
       Step 1:Choose a Zorpia Gold Coin pack
</div><!--pro_top end -->
<div class="pro_bottom">
<form action="#" method="post" name="the_form">
<table border="0" style="margin:0 auto;text-align:center" cellspacing="0" cellpadding="0">
<tr>
<td width="180px" align="left">
<div id="pro_show_one">
<div class="pro_show_top">
<img src="images/pro_one.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$500" name="proname" checked/>$500
</div> </div><!--pro_show end -->
</td>
<td width="180px" align="center">
<div id="pro_show_two">
<div class="pro_show_top">
<img src="images/pro_two.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$5000" name="proname" />$5000
</div> </div><!--pro_show end -->
</td>
<td width="180px" align="right">
<div id="pro_show_thr">
<div class="pro_show_top">
<img src="images/pro_thr.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$50000" name="proname" />$50055

</div> </div><!--pro_show end -->
</td>
</table>
</form>
</div><!--pro_bottom end -->
<div class="pro_top">
       
   Step 2:How would like to pay
</div><!--pro_top end -->
<div class="pro_bottom">
<form action="#" method="post" name="the_form">
<table border="0" style="margin:0 auto;text-align:center" cellspacing="0" cellpadding="0">
<tr>
<td width="180px" align="left">
<div id="pay_show_one">
<div class="pro_show_top">
<img src="images/pro_one.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$500" name="propay" checked/>$500
</div> </div><!--pro_show end -->
</td>
<td width="180px" align="center">
<div id="pay_show_two">
<div class="pro_show_top">
<img src="images/pro_two.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$5000" name="propay" />$5000
</div> </div><!--pro_show end -->
</td>
<td width="180px" align="right">
<div id="pay_show_thr">
<div class="pro_show_top">
<img src="images/pro_thr.gif" width="173px" height="67px"/>
</div>
<div class="pro_show_bottom">
<input type="radio" value="$50000" name="propay" />$50055

</div> </div><!--pro_show end -->
</td>
</table>
</form>
</div>
</div><!--pro end -->
如果选择其中一个单选按钮，就改变当前单线按钮所在的div层的边框颜色.第一组是name="proname"
第二组是name="payname"
比如选中<input type="radio" value="$500" name="proname" checked/>$500这个按钮,那么pro_show_one这个层的边框颜色变为border:1px solid #ff6600;
pro_show_one这个层的css样式为#pro_show_one,#pro_show_two,#pro_show_thr,#pay_show_one,#pay_show_two,#pay_show_thr
{
width:177px;
height:95px;
margin:16px auto;
border:1px solid #777;
}各位路过的兄弟赐教下;^^!

解决方案 »

  1.   

    不知你说的是不是这个意思:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
    <script type="text/javascript">
    <!--
       function a(o){
     var div;
     var radio=document.getElementsByName("a");
     for(var i=0,j=radio.length;i<j;i++){
    if(radio[i].type=='radio'){
    div=radio[i].parentNode
    div.style.borderColor=radio[i].checked?"red":"green";
    }
     }
       }
    //-->
    </script> </HEAD> <BODY>
     
      <div style="width:300px;height:50px;border:1px solid green">
      <DIV></DIV>
      <input type="radio" onclick="a()" name="a"/>A
      </div>
      <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a()" name="a"/>B
      </div>
        <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a()" name="a"/>C
      </div>
     </BODY>
    </HTML>
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <style>
    .show{
    width:177px;
    height:95px;
    margin:16px auto;
    border:1px solid #777;
    }
    .show_checked{
    width:177px;
    height:95px;
    margin:16px auto;
    border:1px solid #ff6600
    }</style>
    <script>
    function change(obj)
    {
    var name = obj.name;
    var radioes = document.getElementsByName(name);
    for(var i=0;i<radioes.length;i++){
    radioes[i].parentNode.parentNode.className = 'show';
    }
    obj.parentNode.parentNode.className = 'show_checked';
    }
    </script>
    </head><body>
    <div class="pro" >
            <div class="pro_top">
           Step 1:Choose a Zorpia Gold Coin pack
            </div><!--pro_top end -->
            <div class="pro_bottom">
            <form action="#" method="post" name="the_form">
                <table border="0" style="margin:0 auto;text-align:center" cellspacing="0" cellpadding="0">
                <tr>
                <td width="180px" align="left">
                    <div class="show_checked">
                        <div class="pro_show_top">
                            <img src="images/pro_one.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$500" name="proname" checked/>$500
                    </div>                </div><!--pro_show end -->
                    </td>
                    <td width="180px" align="center">
                    <div class="show">
                        <div class="pro_show_top">
                            <img src="images/pro_two.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$5000" name="proname" />$5000
                        </div>                </div><!--pro_show end -->
                    </td>
                    <td width="180px" align="right">
                    <div class="show">
                        <div class="pro_show_top">
                            <img src="images/pro_thr.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$50000" name="proname" />$50055
                    
                        </div>                </div><!--pro_show end -->
                    </td>
                </table>
                </form>
            </div><!--pro_bottom end -->
            <div class="pro_top">
           
           Step 2:How would like to pay
            </div><!--pro_top end -->
            <div class="pro_bottom">
            <form action="#" method="post" name="the_form">
                <table border="0" style="margin:0 auto;text-align:center" cellspacing="0" cellpadding="0">
                <tr>
                <td width="180px" align="left">
                    <div class="show_checked">
                        <div class="pro_show_top">
                            <img src="images/pro_one.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$500" name="propay" checked/>$500
                    </div>                </div><!--pro_show end -->
                    </td>
                    <td width="180px" align="center">
                    <div class="show">
                        <div class="pro_show_top">
                            <img src="images/pro_two.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$5000" name="propay" />$5000
                        </div>                </div><!--pro_show end -->
                    </td>
                    <td width="180px" align="right">
                    <div class="show">
                        <div class="pro_show_top">
                            <img src="images/pro_thr.gif" width="173px" height="67px"/>
                        </div>
                        <div class="pro_show_bottom">
                    <input type="radio" onclick="change(this)" value="$50000" name="propay" />$50055
                    
                        </div>                </div><!--pro_show end -->
                    </td>
                </table>
                </form>
            </div>
        </div><!--pro end --></body></html>
      

  3.   

    大致是这个意思的，但是这个是有2组的单选按钮
    <script>
    function changeColor(byid,names){
         var the_div=document.getElementById("byid");
         var radio=document.getElementsByName("names");
         for(var i=0,j=radio.length;i<j;i++){
            if(radio[i].type=='radio'){
                div=radio[i].parentNode
                div.style.borderColor=radio[i].checked?"#ff6600":"#777777";
            }
         }
       }
    </script>我这样写那个地方还需要修改？
      

  4.   


    你可以把组名当参数传进来
    Try...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
    <script type="text/javascript">
    <!--
       function a(groupname){
     var div;
     var radio=document.getElementsByName(groupname);
     for(var i=0,j=radio.length;i<j;i++){
    if(radio[i].type=='radio'){
    div=radio[i].parentNode
    div.style.borderColor=radio[i].checked?"red":"green";
    }
     }
       }
    //-->
    </script> </HEAD> <BODY>
     第一组
      <div style="width:300px;height:50px;border:1px solid green">
      <DIV></DIV>
      <input type="radio" onclick="a('a')" name="a"/>A
      </div>
      <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a('a')" name="a"/>B
      </div>
        <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a('a')" name="a"/>C
      </div>
    第二组:   <div style="width:300px;height:50px;border:1px solid green">
      <DIV></DIV>
      <input type="radio" onclick="a('b')" name="b"/>A
      </div>
      <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a('b')" name="b"/>B
      </div>
        <BR/>
      <div style="width:300px;height:50px;border:1px solid green">
      <input type="radio" onclick="a('b')" name="b"/>C
      </div>
     </BODY>
    </HTML>