在 jQuery 中为单选按钮（
radio）元素绑定
点击事件，可以通过 `on` 方法实现，这种方式支持直接绑定以及
事件委托，适用于静态和动态生成的元素。
### 绑定
点击事件到单选按钮
#### 1. 静态单选按钮绑定
点击事件
如果单选按钮是静态存在于页面中，可以直接使用 `on("
click", handler)` 方法进行绑定：
```javascript
$('input[type="
radio"]').on("
click", function(event) {
console.log("Selected
radio button value: " + $(this).val());
});
```
#### 2. 动态生成的单选按钮使用
事件委托
如果单选按钮是后续通过 JavaScript 动态添加到页面中的，推荐使用
事件委托的方式绑定
事件。可以将
事件绑定到文档（`document`）或其父容器上：
```javascript
$(document).on("
click", 'input[type="
radio"]', function(event) {
console.log("Selected
radio button value: " + $(this).val());
});
```
这种方式确保了即使单选按钮是在
事件绑定之后才添加到文档中，也能正常触发
点击事件[^3]。
#### 3. 获取选中的单选按钮的值
如果需要获取当前选中的单选按钮的值，可以使用以下代码：
```javascript
var selectedValue = $('input[type="
radio"]:checked').val();
console.log("Currently selected
radio button value: " + selectedValue);
```
### 完整示例
以下是一个完整的 HTML 示例，展示了如何为静态和动态添加的单选按钮绑定
点击事件：
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery
Radio Button
Click Event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Static
Radio Buttons</h3>
<input type="
radio" name="options" value="Option1"> Option 1<br>
<input type="
radio" name="options" value="Option2"> Option 2<br>
<input type="
radio" name="options" value="Option3"> Option 3<br>
<h3>Dynamic
Radio Button</h3>
<div id="dynamic-
radio-container"></div>
<script>
// 绑定静态单选按钮的
点击事件
$('input[type="
radio"]').on("
click", function(event) {
console.log("Selected static
radio button value: " + $(this).val());
});
// 动态添加单选按钮
setTimeout(function() {
$('#dynamic-
radio-container').append(
'<input type="
radio" name="dynamicOptions" value="DynamicOption1"> Dynamic Option 1<br>'
);
}, 2000);
// 使用
事件委托绑定动态单选按钮的
点击事件
$(document).on("
click", 'input[type="
radio"]', function(event) {
console.log("Selected dynamic
radio button value: " + $(this).val());
});
</script>
</body>
</html>
```
###
事件处理逻辑
在 jQuery 中，
事件处理机制通过 `jQuery.event` 对象进行管理，包括
事件的添加、触发和分发等过程。
事件绑定方法如 `on` 实际上调用了 `jQuery.event.add` 来实现底层
事件的注册[^2]。
---
扫一扫
6252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
