web网页里有单选框和ok按钮,用js和html实现单击ok按钮后单选框消失,在单击ok按钮单选框出现。。反复下去 JavaScriptHTMLWeb

解决方案 »

  1.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <title>无标题文档</title>
    </head><body>
    <div id="sexoption">
    <input type="radio" name="sex" value="1" />body
    <input type="radio" name="sex" value="2" />girl
    </div>
    <input type="button" id="btn" value="choose" /><script type="text/javascript">
        jQuery(function ($) {
            $("#btn").click(function () {
                if($('#sexoption').css('display')=='block'){
    $('#sexoption').hide();
    }else{
    $('#sexoption').show();
    }
            });
        });
    </script>
    </body>
    </html>
      

  2.   

    能否直接用javascript和html 而不用Jquery来实现?
      

  3.   

    能否直接用javascript和html 而不用Jquery来实现? 
      

  4.   

    能否直接用javascript和html 而不用Jquery来实现? 
      

  5.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <title>无标题文档</title>
    </head>
     
    <body>
    <div id="sexoption">
    <input type="radio" name="sex" value="1" />body
    <input type="radio" name="sex" value="2" />girl
    </div>
    <input type="button" id="btn" value="choose" onclick="changeState()"/>
     
    <script type="text/javascript">
        
    function changeState(){
    var sexoption=document.getElementById("sexoption");
     sexoption.style.display=sexoption.style.display=="none"?"":"none";
    }
    </script>
    </body>
    </html>
      

  6.   


    document.getElementById('btn').onclick=function(){
    var s=document.getElementById('sexoption');
    var status=(s.style.display == 'none');

    if(status){

    document.getElementById( 'sexoption' ).style.display="block";
    }else{
    document.getElementById( 'sexoption' ).style.display="none" ;
    }
    }
      

  7.   

    目前网页有一个btn按钮和一个下拉列表框,单击btn按钮下拉列表框变成几个单选框,在单击 几个单选框变成列表框 如此下去 怎么弄呢?
      

  8.   

    目前网页有一个btn按钮和一个下拉列表框,单击btn按钮下拉列表框变成几个单选框,在单击 几个单选框变成列表框 如此下去 怎么弄呢?
      

  9.   

    一样的道理啊,你再加个下拉框好了。默认display:none ,然后在操作。
      

  10.   

    目前网页有一个btn按钮和一个下拉列表框,单击btn按钮下拉列表框变成几个单选框,在单击 几个单选框变成列表框 如此下去 怎么弄呢?re:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <title>无标题文档</title>
    </head><body>
    <select name="sex" id="sex" size="1">
    <option value="1">body</option>
    <option value="2">girl</option>
    </select>
    <div id="sexoption">
    <!--<input type="radio" name="sex" value="1" />body
    <input type="radio" name="sex" value="2" />girl-->
    </div><input type="button" id="btn" value="choose" /><script type="text/javascript">
        /*jQuery(function ($) {
            $("#btn").click(function () {
                if($('#sexoption').css('display')=='block'){
    $('#sexoption').hide();
    }else{
    $('#sexoption').show();
    }
            });
        });*/
    document.getElementById('btn').onclick=function(){
    var s=document.getElementById('sex');
    var rehtml="";
    var radioName=s.getAttribute('name');
    //alert(radioName);
    for(var i=0;i<s.options.length;i++){
    rehtml+="<input type=\"radio\" name=\""+radioName+"\" value=\""+ s.options[i].value+"\"/>"+s.options[i].text;

    }
    var racontainer=document.getElementById('sexoption');
    if(racontainer.getElementsByTagName('input').length>1){
    document.getElementById('sexoption').innerHTML="";
    }else{
    document.getElementById('sexoption').innerHTML= rehtml;
    }
    /*var s=document.getElementById('sexoption');
    var status=(s.style.display == 'none');

    if(status){

    document.getElementById( 'sexoption' ).style.display="block";
    }else{
    document.getElementById( 'sexoption' ).style.display="none" ;
    }*/
    }
    </script>
    </body>
    </html>