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

最新推荐文章于 2023-07-22 21:22:56 发布

淘宝新蔷程序员特训营,快速学会开发项目

最新推荐文章于 2023-07-22 21:22:56 发布

阅读量622

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/ycs_0405/article/details/110449065

版权

javascript 专栏收录该内容

16 篇文章 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>

淘宝新蔷程序员特训营,快速学会开发项目

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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" valu.
复制链接

扫一扫