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

秒速五厘米 2022-12-25 11:56 240阅读 0赞

<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>