勾选不同复选框切换Bootstrap carousel轮播滑块代码不生效求助

你的代码存在三个核心问题导致功能失效：

• 缺少jQuery依赖：你使用了$调用jQuery语法，但代码中仅引入了Bootstrap的JS包，没有引入jQuery库，底部的单选逻辑代码直接报错无法运行
• CSS选择器匹配逻辑错误：你使用的#a:checked~.c是同级后续兄弟选择器，仅能匹配和input同属一个父级、且在input之后的同级节点。而你的.c、.d类元素是轮播容器的子元素，和input不属于同级节点，因此该选择器永远匹配不到目标元素，样式不生效
• 不符合Bootstrap轮播结构规范：官方Carousel组件要求单个轮播容器内仅保留一个.carousel-inner节点，你放置两个的情况下，轮播原生的指示器、前后切换按钮逻辑会出现异常，无法正常对应当前激活的轮播组

你可以按照以下步骤修改代码即可实现需求：

1. 引入jQuery依赖，放在Bootstrap JS引入代码之前
2. 调整CSS选择器的层级，匹配到嵌套在轮播容器内的.carousel-inner节点
3. 建议将复选框替换为同name的单选框，原生支持单选逻辑，无需额外写JS控制互斥

修正后完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多组轮播切换</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .c {
            display: none;
        }
        .d {
            display: none;
        }
        #a:checked ~ #carouselExampleIndicators .c {
            display: block !important;
        }
        #b:checked ~ #carouselExampleIndicators .d {
            display: block !important;
        }
    </style>
</head>
<body>
    <!-- 改用同name的单选框 原生支持单选 -->
    <input type="radio" id="a" name="carouselSwitch" class="check" checked>
    <input type="radio" id="b" name="carouselSwitch" class="check">
    <label for="a">a组轮播</label>
    <label for="b">b组轮播</label>

    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner c" id="f1">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
                a组第一帧
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
                a组第二帧
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
                a组第三帧
            </div>
        </div>

        <div class="carousel-inner d" id="f2">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?random=4" class="d-block w-100" alt="...">
                b组第一帧
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=5" class="d-block w-100" alt="...">
                b组第二帧
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=6" class="d-block w-100" alt="...">
                b组第三帧
            </div>
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- 先引入jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    <!-- 可选：切换轮播组时自动回到第一帧 -->
    <script>
        $(".check").on('change', function () {
            const carouselIns = bootstrap.Carousel.getInstance(document.getElementById('carouselExampleIndicators'))
            carouselIns.to(0)
        })
    </script>
</body>
</html>

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