jQuery 动态更改 bootstrap 进度条值的方法

在本文中，我们将介绍如何使用 jQuery 动态更改 Bootstrap 进度条的值，在复选框被选中时实现动态效果。

1. 引入必要的资源文件

首先，在 HTML 页面中的 <head> 标签中引入所需的资源文件，包括 jQuery 库、Bootstrap 样式和脚本文件。示例如下：

<head>
    // 引入 jQuery
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    // 引入 Bootstrap 样式
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    // 引入 Bootstrap 脚本
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>

2. 创建进度条和复选框

接下来，在页面中创建一个 Bootstrap 进度条和一些复选框，用于触发动态更改进度条的效果。示例如下：

<div class="progress">
    <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="checkboxes">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">选项1</label>
    <br>
    <input type="checkbox" id="checkbox2" />
    <label for="checkbox2">选项2</label>
    <br>
    <input type="checkbox" id="checkbox3" />
    <label for="checkbox3">选项3</label>
    <br>
    <input type="checkbox" id="checkbox4" />
    <label for="checkbox4">选项4</label>
    <br>
</div>

3. 使用 jQuery 实现动态更改进度条

下面，我们使用 jQuery 来实现当复选框被选中时，动态更改 Bootstrap 进度条的值。在代码中，我们可以根据选中的复选框数量来计算进度条的百分比，并相应地更新进度条的宽度。示例如下：

$(document).ready(function() {
    // 复选框的 change 事件监听
    $("input[type='checkbox']").on('change', function() {
        // 获取选中的复选框数量
        var checkedCount = $("input[type='checkbox']:checked").length;

        // 根据选中的数量来计算进度条百分比
        var progress = checkedCount * 25;

        // 更新进度条的宽度和 aria-valuenow 属性值
        $("#progress-bar").css("width", progress + "%").attr("aria-valuenow", progress);
    });
});

通过上述 jQuery 代码，当复选框被选中或取消选中时，进度条的宽度和 aria-valuenow 属性值会相应地更新，实现动态改变效果。