如何在Slick轮播切换时保持单选按钮的选中状态

我明白你遇到的问题了——当用Slick轮播切换幻灯片后，之前选中的单选按钮再次回到视图时，选中状态就丢失了，确实挺闹心的。咱们来一步步解决这个问题，核心思路是保存选中的单选按钮值，在轮播切换完成后自动恢复对应按钮的选中状态。

解决步骤 #

• 第一步：声明一个变量，用来存储当前选中的单选按钮的值，初始可以默认选中第一个选项（或者根据你的需求设置）。
• 第二步：监听所有单选按钮的点击事件，更新存储的选中值。
• 第三步：绑定Slick的afterChange事件，每次轮播切换完成后，在当前显示的幻灯片中找到对应值的单选按钮，将其设为选中状态。

修改后的完整代码

// 存储选中的单选值
let selectedRadioValue = 'item 1'; // 默认选中第一个选项

$('.my-slick-carousel').each(function() {
    let slider = $(this);
    slider.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        dots: true,
        infinite: true,
        arrows: true,
        centerPadding: '0px',
        variableWidth: true,
        centerMode: false,
        touchThreshold: 100,
        rows: 0,
    });

    // 监听轮播切换完成事件，恢复选中状态
    slider.on('afterChange', function(event, slick, currentSlide) {
        $(slick.$slides[currentSlide]).find(`input[type="radio"][value="${selectedRadioValue}"]`).prop('checked', true);
    });
});

// 监听单选按钮点击，更新存储的选中值
$('input[name="addOnsRadio"]').on('click', function() {
    selectedRadioValue = $(this).val();
});

.items {
  width: 380px;
  background-color: gray;
  border-radius:2rem;
  text-align:center;
}
.slick-prev,
.slick-next {
  z-index:9;
}
.slick-next:before, .slick-prev:before {
  color: red;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <h4 class="text-center">Maintain the selected radio button on slick slide and maintain the selected state as you navigate between slides.</h4>
<div class="my-slick-carousel py-5 px-3">
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 1" checked> item 1</div>
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 2"> item 2</div>
    <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 3"> item 3</div>
     <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 4"> item 4</div>
     <div class="items mx-2 p-4"><input type="radio" name="addOnsRadio" value="item 5"> item 5</div>
  </div>
</div>

关键逻辑说明 #

• 为什么要存储值而不是DOM元素？因为Slick的无限滚动特性会克隆幻灯片元素，原DOM元素和克隆出来的元素是不同的节点，通过值匹配可以确保无论切换到原幻灯片还是克隆的幻灯片，都能找到对应的单选按钮。
• afterChange事件是轮播切换完成后触发的，这时候操作当前幻灯片的DOM是最可靠的，不会因为动画未完成导致元素找不到的问题。
• 初始给第一个单选按钮加上checked属性，同时设置selectedRadioValue的初始值，保证页面加载时就有默认选中的状态。

备注：内容来源于stack exchange，提问作者clarkf