当前位置:编程学习 > JAVA >>

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

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

废话不语,共享的代码如下:


[html]
<!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!!!


摘自 SongYanJun2011
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,