jquery通过name绑定单击事件

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

冷小莫v

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

阅读量2.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jsp

本文链接：https://blog.youkuaiyun.com/jr_soft/article/details/16942167

jsp 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何使用JQuery的bind()方法根据radio按钮的name属性来绑定点击事件。当用户点击任一radio按钮时，会弹出对应选项的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>