使用 jQuery 实现 Radio Button 的旧值获取
在网页开发中，使用 radio button 是一种常见的交互方式。你可能会遇到需要获取 radio button 旧值的情况，例如在用户选择不同的选项时，我们可能需要记录之前的选择。今天，我们将通过 jQuery 来实现这一功能。本文将为你详细介绍实现的流程及代码示例。
实现流程
以下是获取 radio button 旧值的基本步骤：
| 步骤编号 | 步骤说明 |
|---|---|
| 1 | 在 HTML 文件中创建 radio button |
| 2 | 使用 jQuery 绑定 change 事件 |
| 3 | 记录和显示旧值 |
| 4 | 测试及调试 |
步骤详解
1. 创建 HTML 中的 Radio Button
我们先在 HTML 文件中创建几个 radio button，供用户选择。
<div>
<label>
<input type="radio" name="option" value="Option 1"> Option 1
</label>
<label>
<input type="radio" name="option" value="Option 2"> Option 2
</label>
<label>
<input type="radio" name="option" value="Option 3"> Option 3
</label>
</div>
<p id="old-value"></p>
type="radio"：定义为 radio button。name="option"：同一组 radio button 必须有相同的 name 属性。<p id="old-value"></p>：用于显示旧值。
2. 使用 jQuery 绑定 change 事件
接下来，引入 jQuery，并在 DOM 加载完成后绑定 change 事件。
<script src="
<script>
$(document).ready(function(){
let oldValue = null; // 用于保存旧值
// 绑定 change 事件
$("input[type='radio'][name='option']").change(function(){
// 当有新值被选择时
if (oldValue !== null) {
$("#old-value").text("旧值是: " + oldValue); // 显示旧值
}
oldValue = $(this).val(); // 更新为当前选中的值
});
});
</script>
$(document).ready(function(){...})：确保 DOM 在执行代码前已完全加载。let oldValue = null;：初始化一个变量来存储旧值。$("input[type='radio'][name='option']").change(function(){...})：为所有指定的 radio button 绑定 change 事件。$(this).val();：获取当前选中选项的值。
3. 记录和显示旧值
在上述代码中，当 radio button 的状态发生改变时，我们会记录上一个选择的值并显示在页面上。
4. 测试及调试
现在，我们已经完成了代码的编写。你可以在浏览器中打开 HTML 文件，选择不同的 radio button，查看旧值是如何变化的。
序列图展示
下面是实现过程中各个组件之间交互的序列图：
sequenceDiagram
participant User as 用户
participant Radio as Radio Button
participant jQuery as jQuery 代码
participant Display as 显示区域
User->>Radio: 选择一个选项
Radio->>jQuery: 触发 change 事件
jQuery->>Display: 更新旧值
结尾
通过本文的介绍，你已经掌握了如何使用 jQuery 获取 radio button 的旧值。这个功能在许多表单交互中都非常实用。希望你能在今后的开发中灵活运用，也欢迎尝试更复杂的交互效果！如果有任何问题，随时可以向我提问。
