radio控制div显示或隐藏的代码-蒲公英云

radio控制div显示或隐藏的代码

<html>
    <head>
        <title>测试</title>    
    </head>
    <body>
        <form action="" method="get">
            <input type="radio" name="role" id="role_1" value="1" checked>学生
            <input type="radio" name="role" id="role_2" value="2">家长
            <input type="radio" name="role" id="role_3" value="3">老师
            <input type="radio" name="role" id="role_4" value="4">助理
            <input type="radio" name="role" id="role_5" value="5">其他
            <div id="role_con_1">学生表单项</div>
            <div id="role_con_2">家长表单项</div>
            <div id="role_con_3">老师表单项</div>
            <div id="role_con_4">助理表单项</div>
            <div id="role_con_5">其他表单项</div>
        </form>
        <script type="text/javascript" src="/static/js/dist/jquery/jquery-1.11.1.min.js"></script>
        <script>
            //var role = $("input[name='role']:checked").val();
            //console.log("role:",role);
            $(document).ready(function(){
                $("#role_con_1").show();
                $("#role_con_2").hide();
                $("#role_con_3").hide();
                $("#role_con_4").hide();
                $("#role_con_5").hide();
                $('input[type=radio][name=role]').change(function() {    
                  //console.log("role:",this.value);
                  var val = this.value;
                  if(val == '1') {
                      $("#role_con_1").show();
                      $("#role_con_2").hide();
                      $("#role_con_3").hide();
                      $("#role_con_4").hide();
                      $("#role_con_5").hide();
                  }else if(val == '2') {
                      $("#role_con_1").hide();
                      $("#role_con_2").show();
                      $("#role_con_3").hide();
                      $("#role_con_4").hide();
                      $("#role_con_5").hide();
                  }else if(val == '3') {
                      $("#role_con_1").hide();
                      $("#role_con_2").hide();
                      $("#role_con_3").show();
                      $("#role_con_4").hide();
                      $("#role_con_5").hide();
                  }else if(val == '4') {
                      $("#role_con_1").hide();
                      $("#role_con_2").hide();
                      $("#role_con_3").hide();
                      $("#role_con_4").show();
                      $("#role_con_5").hide();
                  }else if(val == '5') {
                      $("#role_con_1").hide();
                      $("#role_con_2").hide();
                      $("#role_con_3").hide();
                      $("#role_con_4").hide();
                      $("#role_con_5").show();
                  }else{
                      $("#role_con_1").show();
                      $("#role_con_2").hide();
                      $("#role_con_3").hide();
                      $("#role_con_4").hide();
                      $("#role_con_5").hide();
                  }
               });
            });
        </script>
    </body>
</html>