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


今天遇到了一个小问题，关于 html 中 radio 值绑定的问题，发现使用 JQuery中的  .bind() 事件 可以更加有效的 达到我需要的功能， 作为笔记记录共享于此，提供给刚入门的新手们参考。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>JQuery 绑定事件.bind()  绑定radio值</title>  
  6. <script src="../js/jquery.min.js" type="text/javascript"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <form action="#" method="post">  
  11. <label for="tj1">  
  12.   <input type="radio" name="radio_tj" id="tj1" value="1">  
  13.   资产</label>  
  14. <label for="tj2">  
  15.   <input type="radio" name="radio_tj" id="tj2" value="2">  
  16.   管理</label>  
  17. <label for="tj3">  
  18.   <input type="radio" name="radio_tj" id="tj3" value="3">  
  19.   调度</label>  
  20. <label for="tj4">  
  21.   <input type="radio" name="radio_tj" id="tj4" value="4">  
  22.   电网</label>  
  23. <label for="tj5">  
  24.   <input type="radio" name="radio_tj" id="tj5" value="5" checked>  
  25.   地理</label>  
  26.     
  27. <!-- jquery绑定事件，当radio值发生变化时触发行为 -->   
  28. <script type="text/javascript">   
  29.   
  30.   
  31. $(document).ready(function() {   
  32.   
  33.     //主要 .bind() 事件代码例子：  
  34.     //input标签[标签名称='指定的名称'].绑定函数("事件",自定义函数(){  操作代码...  });  
  35.     //$("input[name='radio_tj']").bind("click",function(){ alert($(this).val()); });  
  36.     $("input[name='radio_tj']").bind("click",function(){  
  37.           
  38.         //测试操作代码  
  39.         alert($(this).val());  
  40.         var $selectedvalue = $(this).val();  
  41.         if ($selectedvalue == 1) {   
  42.             alert("您现在选择备份 资产范围  的数据");  
  43.         }  
  44.         else if ($selectedvalue == 2) {  
  45.             alert("您现在选择备份 管理范围  的数据");  
  46.         }  
  47.         else if ($selectedvalue == 3) {  
  48.             alert("您现在选择备份 调度范围  的数据");  
  49.         }  
  50.         else if ($selectedvalue == 4) {  
  51.             alert("您现在选择备份 电网范围  的数据");  
  52.         }  
  53.         else {    
  54.             alert("您现在选择备份 地理范围  的数据");  
  55.         }   
  56.     });  
  57.       
  58. });  
  59. </script>  
  60. </form>  
  61. </body>  
  62. </html>  

相关内容