JQuery 绑定事件.bind() 绑定radio值

最新推荐文章于 2023-04-24 20:01:03 发布

SongYanJun2011

最新推荐文章于 2023-04-24 20:01:03 发布

阅读量6.6k

点赞数

分类专栏： JQUERY 文章标签： jquery input function xhtml html action

本文链接：https://blog.csdn.net/SongYanJun2011/article/details/7181347

版权

JQUERY 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天遇到了一个小问题，关于 html 中 radio 值绑定的问题，发现使用 JQuery中的 .bind() 事件可以更加有效的达到我需要的功能，作为笔记记录共享于此，提供给刚入门的新手们参考。（哥哥我继续保持，每天一点点，十天一大块的贡献精神，^-^ !!!）

废话不语，共享的代码如下：

<!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" />
<title>JQuery 绑定事件.bind()  绑定radio值</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<form action="#" method="post">
<label for="tj1">
  <input type="radio" name="radio_tj" id="tj1" value="1">
  资产</label>
<label for="tj2">
  <input type="radio" name="radio_tj" id="tj2" value="2">
  管理</label>
<label for="tj3">
  <input type="radio" name="radio_tj" id="tj3" value="3">
  调度</label>
<label for="tj4">
  <input type="radio" name="radio_tj" id="tj4" value="4">
  电网</label>
<label for="tj5">
  <input type="radio" name="radio_tj" id="tj5" value="5" checked>
  地理</label>
  
<!-- jquery绑定事件，当radio值发生变化时触发行为 --> 
<script type="text/javascript"> 


$(document).ready(function() { 

	//主要 .bind() 事件代码例子：
	//input标签[标签名称='指定的名称'].绑定函数("事件",自定义函数(){  操作代码...  });
	//$("input[name='radio_tj']").bind("click",function(){ alert($(this).val()); });
	$("input[name='radio_tj']").bind("click",function(){
		
		//测试操作代码
		alert($(this).val());
		var $selectedvalue = $(this).val();
		if ($selectedvalue == 1) { 
			alert("您现在选择备份 资产范围  的数据");
		}
		else if ($selectedvalue == 2) {
			alert("您现在选择备份 管理范围  的数据");
		}
		else if ($selectedvalue == 3) {
			alert("您现在选择备份 调度范围  的数据");
		}
		else if ($selectedvalue == 4) {
			alert("您现在选择备份 电网范围  的数据");
		}
		else {  
			alert("您现在选择备份 地理范围  的数据");
		} 
	});
	
});
</script>
</form>
</body>
</html>

Over!!!