在 owl carousal html 中自动取消选中的复选框

Question

我在owl轮播下面创建了一个复选框，完整代码如下：

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  slideBy: 5,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

.owl-dot {
  display: none !important;
}

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}


/* fix blank or flashing items on carousel */

.owl-carousel .item {
  position: relative;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}


/* end fix */

.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 10px;
}

.owl-nav i:hover {
  color: #ccc;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-prev:hover {
  color: none;
}

.owl-nav .owl-next {
  right: -30px;
}

.owl-prev,
.owl-next {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid black;
}

.owl-prev {
  left: -80px !important;
}

.owl-next {
  right: -80px !important;
}

.owl-prev i,
.owl-next i {
  transform: scale(5, 5);
  color: #F2136E;
}

.item img {
  height: 150px !important;
  width: 150px !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div style="position: relative; " class="row">
    <h3 style="font-weight: bold; margin-left:15%; color:#F2136E;  top:0px; left:0; position: absolute;">Package 1</h3>



    <div class="carousel-wrap" style="margin-top: 40px;">
      <div class="owl-carousel owl-theme">
        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/5e68d81747d50d9c7b5689f109f042c9.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/dd2823a1ef8e776b14fdbcc854b92c74.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/317212cea9b87a4f0bea35202156bc75.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/20f1c60528bee31338236723575cb56a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/cff57350b0abc1f2e95f6022c41f8e8a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>


        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/481536225d682ae9712f67479d278e51.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/213687a10d166d87b5567fd8ace1ebdb.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/57dd3add7b0e1351c2633e6c1a5c00fc.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/436e1d3e7856b75314477de53c7f3526.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/265e17defc7bdb44d7b6d805d3b06860.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

这是我的直播 URL : enter link description here 如果我 select 任何复选框并移动滑块，主要是当我单击左侧导航按钮移动滑块时。 selected 项目被删除selected，有时如果我移动再次单击导航按钮，消失的 selection 显示为 selected。 cn 任何人请告诉我如何解决这个问题，在此先感谢

Answer 1

您可以为复选框编写事件处理程序，因此无论何时更改复选框，您都可以检查复选框的状态是否已选中，具体取决于此添加一些 class 即：checked 到复选框单击并使用 data-id 到原始复选框。然后，在 changed.owl.carousel 事件上将 attr("checked", "true"); 添加到具有 checked class.[=18= 的所有复选框]

演示代码 :

var owl = $('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  slideBy: 5,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
owl.on('changed.owl.carousel', function(e) {
  //add checked true to all checkboxes which has .checked class
  $(".owl-carousel .checked").attr("checked", "true");
});
//on chnage of checkbox is will get called
$("input:checkbox").change(function() {
  //get data-id
  var data_id = $(this).attr('data-id');
  if ($(this).is(":checked")) {
    $(this).addClass("checked") //add class checked
    $(".owl-carousel input[data-id=" + data_id + "]").addClass("checked")
  } else {
    $(this).removeClass("checked") //remove checked
    $(".owl-carousel input[data-id=" + data_id + "]").removeClass("checked")
  }


})

/* fix blank or flashing items on carousel */

.owl-carousel .item {
  position: relative;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}


/* end fix */

.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 10px;
}

.owl-nav i:hover {
  color: #ccc;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-prev:hover {
  color: none;
}

.owl-nav .owl-next {
  right: -30px;
}

.owl-prev,
.owl-next {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid black;
}

.owl-prev {
  left: -80px !important;
}

.owl-next {
  right: -80px !important;
}

.owl-prev i,
.owl-next i {
  transform: scale(5, 5);
  color: #F2136E;
}

.item img {
  height: 150px !important;
  width: 150px !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div style="position: relative; " class="row">
    <h3 style="font-weight: bold; margin-left:15%; color:#F2136E;  top:0px; left:0; position: absolute;">Package 1</h3>



    <div class="carousel-wrap" style="margin-top: 40px;">
      <div class="owl-carousel owl-theme">
        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/5e68d81747d50d9c7b5689f109f042c9.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check ">
            <!--added data-id to identify checkbox-->
            <input type="checkbox" class="form-check-input" data-id="1">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/dd2823a1ef8e776b14fdbcc854b92c74.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="2">
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/317212cea9b87a4f0bea35202156bc75.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="3">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/20f1c60528bee31338236723575cb56a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="4">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/cff57350b0abc1f2e95f6022c41f8e8a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="5">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>


        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/481536225d682ae9712f67479d278e51.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="6">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/213687a10d166d87b5567fd8ace1ebdb.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="7">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/57dd3add7b0e1351c2633e6c1a5c00fc.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="8">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/436e1d3e7856b75314477de53c7f3526.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="9">

          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/265e17defc7bdb44d7b6d805d3b06860.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input" data-id="10">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在 owl carousal html 中自动取消选中的复选框

selected checkbox deselecting automatically in owl carousal html

html

javascript

checkbox

jquery

carousel