Qt中如何通过复选框控制进度条增减？

HTML结构 #

<!-- 进度条容器 -->
<div style="width: 300px; height: 20px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden;">
  <div id="progressBar" style="width: 0%; height: 100%; background-color: #4CAF50; transition: width 0.3s ease;"></div>
</div>

<!-- 五个复选框，对应每次20%的进度变化 -->
<div style="margin-top: 10px;">
  <input type="checkbox" class="progress-checkbox"> 选项1
  <input type="checkbox" class="progress-checkbox"> 选项2
  <input type="checkbox" class="progress-checkbox"> 选项3
  <input type="checkbox" class="progress-checkbox"> 选项4
  <input type="checkbox" class="progress-checkbox"> 选项5
</div>

JavaScript逻辑 #

const progressBar = document.getElementById('progressBar');
const checkboxes = document.querySelectorAll('.progress-checkbox');

let currentProgress = 0;

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 根据勾选状态调整进度值
    currentProgress += this.checked ? 20 : -20;
    // 限制进度在0%-100%范围内
    currentProgress = Math.max(0, Math.min(100, currentProgress));
    // 更新进度条显示
    progressBar.style.width = `${currentProgress}%`;
  });
});

核心逻辑说明 #

• 给每个复选框绑定change事件，触发时判断当前勾选状态
• 勾选时进度增加20%，取消勾选时进度减少20%
• 通过Math.max和Math.min确保进度值不会超出0%-100%的范围
• 进度条加入CSS过渡效果，让宽度变化更平滑

内容的提问来源于stack exchange，提问作者berkeozen