js和jquery动态实现radio选中触发事件

最新推荐文章于 2025-05-28 11:39:43 发布

一个菜鸟的奋斗之路

最新推荐文章于 2025-05-28 11:39:43 发布

阅读量5.9w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： js jquery

本文链接：https://blog.youkuaiyun.com/tao111369/article/details/85261181

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文介绍如何使用原生JS和jQuery处理Radio按钮选择事件，包括获取被选中按钮的值，并通过两种不同方法实现事件触发，适用于前端开发人员。

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

最近写的功能是根据radio选中不同的值实现触发对应的事件，现将实现方法总结如下：

html如下：

<div id="div_pathType">
	<input name="pathType" class="page_input_radio" id="pathType" type="radio" checked="" value="1">路径1
	<input name="pathType" class="page_input_radio" id="pathType" type="radio" value="2">路径2
</div>

1.js实现方法：

var pathTypeArr = document.getElementsByName("pathType");
pathTypeArr[0].onclick=function(){
	var checkValue = pathTypeArr[0].value;
	alert(checkValue);
};
pathTypeArr[1].onclick=function(){
	var checkValue = pathTypeArr[1].value;
	alert(checkValue);
};

2.jquery实现方法（根据input的name属性）：

$('input:radio[name="pathType"]').click(function(){
	var checkValue = $('input:radio[name="pathType"]:checked').val(); 
	alert(checkValue);
});

3.jquery实现方法（根据input的type='radio'属性）：

注：下面的事件触发对页面所有type=‘radio’的input都有效，请谨慎使用

$(':radio').click(function(){
	var checkValue = $(this).val(); 
	alert(checkValue);
});