JQuery应用_通过radio 控制内容的显示

最新推荐文章于 2024-06-11 10:54:21 发布

高达一号

最新推荐文章于 2024-06-11 10:54:21 发布

阅读量2.1k

点赞数

分类专栏： JQuery应用

本文链接：https://blog.csdn.net/u010003835/article/details/55517760

版权

JQuery应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

平常的工作中，我们有时候需要通过 <input type="radio" /> 来控制接下来模块的显示，今天我写了个例子，记录一下。

<!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 runat="server"> 
<title>test</title> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
</script> 
</head> 
<body> 
	<label>
		<input name="type" type="radio" value="1" />
		<span>页面抵达</span>
	</label>
	<label>
		<input name="type" type="radio" value="2" />
		<span>停留时长</span>
	</label>
	<label>
		<input name="type" type="radio" value="3" />
		<span>访问深度</span>
	</label>
	<label>
		<input name="type" type="radio" value="4" />
		<span>事件</span>
	</label>
	<br/><br/>
	
	<div id="PageArrival">
		<span>页面抵达 -- show</span>
	</div>
	
	<div id="Duration">
		<span>停留时长  -- show</span>
	</div>
	
	<div id="Depth">
		<span>访问深度 -- show</span>
	</div>
	
	<div id="Event">
		<span>事件 -- show</span>
	</div>
	
	<script>
		$(document).ready(function () {
			$("input:radio[name='type']").change(
				function () {
					var blockArr = ["", "PageArrival", "Duration", "Depth", "Event"];
					var selectedBlock = $('input:radio[name="type"]:checked').val();

					for(var i=1; i<blockArr.length; i++){
						if(selectedBlock != i){
							$("#"+blockArr[i]).hide();
						}else{
							$("#"+blockArr[i]).show();
						}
					}
				});
		})
	</script>
</body> 
</html>

效果：

--------------------------------

高达一号

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery应用_通过radio 控制内容的显示

平常的工作中，我们有时候需要通过来控制接下来模块的显示，今天我写了个例子，记录一下。 test 页面抵达停留时长访问深度事件页面抵达 -- show 停留时长 -- show 访问深度 -- show 事件
复制链接

扫一扫