挑战与传统方法的局限性
在构建包含多个单选按钮组的动态表单时，我们经常需要一个视觉反馈来展示用户的选择进度，例如一个进度条。然而，传统上通过为每个状态定义独立的CSS @keyframes动画来实现进度条更新，存在以下几个主要问题：
- 非累加性更新： 当用户在不同组之间切换选项时，进度条可能不会基于当前总进度进行累加或减去特定值，而是直接跳到预设的固定宽度，导致动画不连贯且不符合预期。
- 动画重置问题： 每次切换选项时，如果使用基于类名切换的@keyframes动画，动画可能会从头开始播放，而不是从当前状态平滑过渡到新状态。
- 代码冗余与维护困难： 为每个可能的进度状态定义一个@keyframes动画会使得CSS文件变得庞大且难以管理，尤其当进度状态增多时。
- 事件监听效率低下： 频繁地为每个元素绑定click事件，并且在事件处理函数内部再次使用$(document).ready()，会导致事件重复绑定，影响性能，并可能导致事件只触发一次的问题。
为了克服这些局限性，我们将采用一种更简洁、高效且易于维护的方法。
核心改进策略
本教程将介绍一种优化方案，它主要围绕以下几个核心概念展开：
- 利用CSS transition 实现平滑动画： 相较于复杂的@keyframes，transition属性允许元素在CSS属性值变化时平滑过渡，这非常适合进度条宽度的动态调整。
- 通过HTML data 属性存储进度值： 将每个单选按钮对总进度的贡献值直接存储在其data-progress属性中，使得JavaScript能够轻松获取并计算总进度。
- 集中式JavaScript逻辑处理： 使用jQuery监听所有单选按钮的change事件，并在一个统一的函数中计算所有选中项的总进度，然后动态设置进度条的宽度。
实现步骤详解
1. HTML 结构调整
首先，我们需要修改单选按钮的HTML结构，为每个单选按钮添加一个data-progress属性，用于存储该选项所代表的进度值。同时，移除label上的onclick事件，因为我们将通过jQuery统一处理事件。
<head>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="wrappy">
Speed
<div class="progress">
<div class="progress-value"></div>
</div>
</div>
<div class="row">
<label>Group 1</label>
<div class="col-6">
<!-- 为单选按钮添加 data-progress 属性，并设置初始选中项 -->
<input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE" data-progress="50" checked>
<label for="js1">
Option 1a (Default 50%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE" data-progress="75">
<label for="js2">
Option 2a (75%)
</label>
</div>
<hr style="margin-top:24px;">
<label>Group 2</label>
<div class="col-6">
<input type="radio" style="display:none;" id="js3" data-price="116.99" value="option1b" name="TWO" data-progress="0">
<label for="js3">
Option 1b (Default 50%, but if option 2a selected then stay 75%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js4" data-price="93.99" value="option2b" name="TWO" data-progress="10">
<label for="js4">
Option 2b (Should increase from group 1 selection)
</label>
</div>
</div>
<!-- 引入Bootstrap JS (通常放在body结束标签前) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>注意：
- data-progress的值应为数字，代表该选项对总进度的贡献百分比。
- checked属性用于设置默认选中的选项，确保页面加载时进度条有初始值。
- 移除了label上的onclick事件，避免与jQuery事件监听冲突。
2. CSS 样式简化
我们将移除所有复杂的@keyframes动画定义，转而使用transition属性来处理progress-value元素的宽度变化动画。
body {
padding: 12px;
}
.col-6 label {
border: 1px solid #333;
padding: 8px 12px; /* 增加内边距使标签更易点击 */
cursor: pointer; /* 提示用户可点击 */
}
.col-6 input[type=radio]:checked + label {
border: 2px solid blue;
}
.progress {
background: rgba(255, 255, 255, 0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
margin-bottom: 10px;
overflow: hidden; /* 确保进度条内容不会溢出圆角 */
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 100%; /* 填充父容器的高度 */
width: 0; /* 初始宽度为0 */
/* 关键：添加 transition 属性，使宽度变化时平滑过渡 */
transition: width 0.5s ease-in-out; /* 动画时长0.5秒，缓入缓出 */
}注意：
- .progress-value中的height现在设置为100%，以适应父容器progress的高度。
- transition: width 0.5s ease-in-out; 是实现平滑动画的关键。当JavaScript改变.progress-value的width属性时，CSS会自动在0.5秒内完成过渡。
3. JavaScript 逻辑实现
使用jQuery来监听所有单选按钮的change事件，并动态计算总进度。
$(document).ready(function() {
// 缓存所有单选按钮的jQuery对象
const $radios = $('input[type="radio"]');
const $progressBarValue = $(".progress-value");
// 绑定 change 事件监听器
$radios.change(function() {
let progress_value = 0; // 初始化总进度
// 遍历所有已选中的单选按钮
$('input[type="radio"]:checked').each(function() {
// 获取当前选中单选按钮的 data-progress 值并累加
progress_value += Number($(this).data('progress'));
});
console.log("Current total progress:", progress_value + '%'); // 调试输出
// 设置进度条的宽度，CSS transition 会使其平滑过渡
$progressBarValue.width(progress_value + '%');
});
// 页面加载时触发一次 change 事件，以初始化进度条状态
// 这会根据默认选中的单选按钮设置初始进度
// 确保至少有一个单选按钮被选中，否则可以手动设置一个初始值
$radios.first().change(); // 触发第一个单选按钮的 change 事件
});关键点：
- $(document).ready() 确保DOM加载完成后再执行脚本。
- $('input[type="radio"]') 选中页面上所有类型为radio的input元素。
- .change(function() { ... }) 监听这些单选按钮的change事件。当用户选择或取消选择单选按钮时，该事件会被触发。
- $('input[type="radio"]:checked').each(function() { ... }) 遍历所有当前被选中的单选按钮。
- $(this).data('progress') 获取当前单选按钮的data-progress属性值。
- Number(...) 将获取到的字符串转换为数字以便进行累加。
- $(".progress-value").width(progress_value + '%') 动态设置进度条的宽度。由于CSS中定义了transition，这个宽度变化将是平滑的。
- $radios.first().change(); 在页面加载完成后手动触发一次change事件，以确保进度条在页面初次渲染时就显示正确的初始进度（基于任何预先选中的单选按钮）。
优势与总结
采用这种方法，我们实现了：
- 平滑的动画效果： 借助CSS transition，进度条的宽度变化不再是生硬的跳跃，而是平滑过渡，提升了用户体验。
- 累加式进度更新： JavaScript逻辑会计算所有选中单选按钮的data-progress总和，确保进度条反映的是所有相关选择的累积结果，解决了非累加性问题。
- 代码简洁与易维护： 移除了大量的@keyframes定义和重复的事件绑定，使得CSS和JavaScript代码都更加精简、清晰，降低了维护成本。
- 高效的事件处理： 统一监听change事件避免了重复绑定，提高了脚本的执行效率。
- 灵活的配置： 仅需修改HTML中的data-progress属性即可调整每个选项的进度贡献，无需改动CSS或JavaScript逻辑。
通过以上步骤，我们成功构建了一个响应式、动画流畅且易于扩展的动态进度条系统，完美解决了多组单选按钮更新动画的复杂性问题。这种模式不仅适用于进度条，也可推广到其他需要根据用户选择动态更新UI元素的场景。
