我想实现阿里巴巴上注册中那个单选按钮效果，怎么能？

用JS很好控制的，你设置一下默认显示的，其它两个隐藏了，等点某一个的时候，在JS事件里把现在的这个隐藏了，把相应的显示出来，。就这样

解决方案 »

  1.   

    HTML:
    <div id="name">
        <div class="text" id="keywords_info_check">&nbsp;主营方向</div>
        <div class="redstar">*</div>
    </div>
    <div class="input">
         <input type="radio" name="business_role" value="seller" onclick="tr_display('sell');" onblur="goinitstyle(business_info);" >销售 
         <input type="radio" name="business_role" value="buyer" onclick="tr_display('buy');" onblur="goinitstyle(business_info);">采购 
         <input type="radio" name="business_role" value="both" onclick="tr_display('both');" onblur="goinitstyle(business_info);" checked> 两者都有<br><br>
    <div id="sellkeywords"><span class="R">销售</span>的产品（提供的服务）：<br>
    <input id="salekeyword" class="f2" type="text" maxLength="40" name="_fmm.j._0.s" value="" ></div><br>
    <div id="buykeywords" style="display:block"><span class="R">采购</span>的产品（需要的服务）：<br><input id="buykeyword" class="f2" type="text" maxLength="40" name="_fmm.j._0.bu" value="" ></div></div>
    <div class="note" id="business_info"></div></div>
    Javascript:
    function tr_display(type)
    {
    business_info.className = 'notetrue';
    business_info.innerHTML = '为了给您提供匹配的产品信息，请填写贵公司主营的产品（或服务）关键字。<br>如有多个，请用逗号分隔。如：布料，拉链';
    if(type == 'buy'){
      buykeywords.style.display = 'block';
      sellkeywords.style.display = 'none';
    }
    if(type == 'sell')
    {
      buykeywords.style.display = 'none';
      sellkeywords.style.display = 'block';
    }
    if(type == 'both')
    {
      buykeywords.style.display = 'block';
      sellkeywords.style.display = 'block';
    }
    }
      

  2.   

    <html>
    <head>
    <script type="text/javascript">
    function tr_display(type)
    {
    if(type == 'buy'){
      document.getElementById('buykeywords').style.display = 'block';
      document.getElementById('sellkeywords').style.display = 'none';
    }
    if(type == 'sell')
    {
      document.getElementById('buykeywords').style.display = 'none';
      document.getElementById('sellkeywords').style.display = 'block';
    }
    if(type == 'both')
    {
      document.getElementById('buykeywords').style.display = 'block';
      document.getElementById('sellkeywords').style.display = 'block';
    }
    }
    </script>
    </head>
    <body>
    <div>
        <div>&nbsp;主营方向</div>
        <div>*</div>
    </div>
    <div>
         <input type="radio" name="business_role" value="seller" onclick="tr_display('sell');" >销售 
         <input type="radio" name="business_role" value="buyer" onclick="tr_display('buy');" >采购 
         <input type="radio" name="business_role" value="both" onclick="tr_display('both');"  checked> 两者都有<br><br>
     <div id="sellkeywords"><span>销售</span>的产品（提供的服务）：<br>
      <input id="salekeyword" type="text" maxLength="40" name="salekeyword" value="" >
     </div>
     <br>
    <div id="buykeywords" style="display:block"><span >采购</span>的产品（需要的服务）：<br>
    <input id="buykeyword" type="text" maxLength="40" name="buykeyword" value="" >
    </div>
    </div>
    </body>
    </html>  测过了,可以的
      

  3.   

    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <form name="form">
    <div id="name">
        <div class="text" id="keywords_info_check">&nbsp;主营方向</div>
        <div class="redstar">*</div>
    </div>
    <div class="input">
         <input type="radio" name="business_role" value="seller" onclick="tr_display('sell');" onblur="goinitstyle(business_info);" >销售 
      <input type="radio" name="business_role" value="buyer" onclick="tr_display('buy');" onblur="goinitstyle(business_info);">采购 
         <input type="radio" name="business_role" value="both" onclick="tr_display('both');" onblur="goinitstyle(business_info);" checked> 两者都有<br><br>
    <div id="sellkeywords"><span class="R">销售</span>的产品（提供的服务）：<br>
    <input id="salekeyword" class="f2" type="text" maxLength="40" name="_fmm.j._0.s" value="" ></div><br>
    <div id="buykeywords" style="display:block"><span class="R">采购</span>的产品（需要的服务）：<br><input id="buykeyword" class="f2" type="text" maxLength="40" name="_fmm.j._0.bu" value="" ></div></div>
    <div class="note" id="business_info"></div></div>
    </form>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function tr_display(type)
    {
    business_info.className = 'notetrue';
    business_info.innerHTML = '为了给您提供匹配的产品信息，请填写贵公司主营的产品（或服务）关键字。<br>如有多个，请用逗号分隔。如：布料，拉链';
    if(type == 'buy'){
      buykeywords.style.display = 'block';
      sellkeywords.style.display = 'none';
    }
    if(type == 'sell')
    {
      buykeywords.style.display = 'none';
      sellkeywords.style.display = 'block';
    }
    if(type == 'both')
    {
      buykeywords.style.display = 'block';
      sellkeywords.style.display = 'block';
    }
    }
    function goinitstyle(obj){
    //alert(obj.id);
    document.getElementById("business_info").className = 'note';
    document.getElementById("business_info").innerHTML = '为了给您提供匹配的产品信息，请填写贵公司主营的产品（或服务）关键字。<br>如有多个，请用逗号分隔。如：布料，拉链';
    var pass = true;
    var keyselected ='';
    for(i=0;i<document.form.business_role.length;i++){
    if(document.form.business_role[i].checked){
    keyselected = document.form.business_role[i].value;
    break;
    }
    }
    if(keyselected == 'buyer'){
    if(document.getElementById("buykeyword").value != ''){

    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") < 0 ){ 
    document.getElementById("keywords_info_check").innerHTML = "&nbsp;<img src=\"http://img.china.alibaba.com/images/cn/member/icon_right_19x19.gif\" width=\"19\" height=\"16\" align=\"absmiddle\"> " + document.getElementById("keywords_info_check").innerHTML;
    }
    document.getElementById("business_info").className = 'note';
    document.getElementById("business_info").innerHTML = '填写正确。'
    }else{
    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") > 0 ){
    var start =  document.getElementById("keywords_info_check").innerHTML.indexOf('>');
    var end = document.getElementById("keywords_info_check").innerHTML.length;
    document.getElementById("keywords_info_check").innerHTML = document.getElementById("keywords_info_check").innerHTML.substring(start +1,end);
    }

    }


    }else if(keyselected == 'seller'){
    if(document.getElementById("salekeyword").value != ''){
    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") < 0 ){ 
    document.getElementById("keywords_info_check").innerHTML = "&nbsp;<img src=\"http://img.china.alibaba.com/images/cn/member/icon_right_19x19.gif\" width=\"19\" height=\"16\" align=\"absmiddle\"> " + document.getElementById("keywords_info_check").innerHTML;
    }
    document.getElementById("business_info").className = 'note';
    document.getElementById("business_info").innerHTML = '填写正确。'
    }else{
    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") > 0 ){
    var start =  document.getElementById("keywords_info_check").innerHTML.indexOf('>');
    var end = document.getElementById("keywords_info_check").innerHTML.length;
    document.getElementById("keywords_info_check").innerHTML = document.getElementById("keywords_info_check").innerHTML.substring(start +1,end);
    }

    }
     
    }else if(keyselected == 'both'){
    if(document.getElementById("salekeyword").value != '' && document.getElementById("buykeyword").value != ''){
    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") < 0 ){ 
    document.getElementById("keywords_info_check").innerHTML = "&nbsp;<img src=\"http://img.china.alibaba.com/images/cn/member/icon_right_19x19.gif\" width=\"19\" height=\"16\" align=\"absmiddle\"> " + document.getElementById("keywords_info_check").innerHTML;
    }
    document.getElementById("business_info").className = 'note';
    document.getElementById("business_info").innerHTML = '填写正确。'
    }else{
    if(document.getElementById("keywords_info_check").innerHTML.indexOf("img") > 0 ){
    var start =  document.getElementById("keywords_info_check").innerHTML.indexOf('>');
    var end = document.getElementById("keywords_info_check").innerHTML.length;
    document.getElementById("keywords_info_check").innerHTML = document.getElementById("keywords_info_check").innerHTML.substring(start +1,end);
    }

    }

    }
    }
    function setBusinessStyle(){
    business_info.className = 'notetrue';
    }
    //-->
    </SCRIPT></BODY>
    </HTML>