Javascript 选中复选框后更改最近的类

我想使用jquery/javascript在选中/取消选中项目时更改

活动

的类。将有大量的

容器，因此只应针对该特定卡进行更改

  <div class="thm-card">
    <div class="thm-card-media">
      <img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
      <div class="thm-card-overlay">
        <form class="thm-form">
          <div class="form-group"><!--Default Checkbox Item-->
            <label for="__FOR__">
              <input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
              <span class="thm-form-label-side">Active</span>
            </label>
            <a href="#" title="What is this?" data-toggle="popover" data-placement="top" data-content="You can make this slide active by checking this option." data-trigger="hover" class="thm-text-link-default"><i class="fa fa-question-circle"></i></a>
          </div>
        </form><!--Form-->
      </div>
      <span class="thm-card-status">Active</span>

    </div>
    <div class="thm-card-content">
      <div class="thm-card-details">
        <h4>THM Slider Main</h4>
      </div>
    <div class="thm-card-control">
      <div class="thm-card-links">
        <a href="#" class="thm-text-link-card" title="View">View</a>
        <a href="#" class="thm-text-link-card" onclick="return launchEditor('editableimage1', 'https://thehomemag.com/Images/HomeSlider/8.jpg');">Edit</a>
        <span class="thm-card-info"><i class="fa fa-star-o"></i></span>
        <span class="thm-card-info"><i class="fa fa-trash"></i></span>
      </div>
    </div>
    </div>
  </div>

及

---

如上所述，StackOverflow不是一种代码编写服务。根据您在评论中所写的内容，下面是一个工作示例。我将

thm卡状态设置为活动状态

绿色，以便您可以看到它工作

$（函数（）{
$（'input.thm checkbox status'）.change（function（）{
if（$（this）.prop（“选中”）==true）{
$（this）.closest（'div.thm-card'）。find（'span.thm card status'）。addClass（'thm-card-status-active'）；
}否则{
$（this）.closest（'div.thm-card'）。find（'span.thm card status'）。removeClass（'thm-card-status-active'）；
}
});
});
.thm卡状态激活{
颜色：绿色；
}

忙碌的
忙碌的
THM主滑块
您尝试过什么？这不是一个代码编写服务…你试试，发现问题，我们可以帮助！请阅读有关如何提问的帮助部分。我尝试了$（“输入：checkbox.thm checkbox status”）.change（function（）{$（this）.closest（.thm card status”）.toggleClass（'selected'，this.checked）；}）；我还尝试了$（'.thm checkbox status'）.change（function（）{if（$（this）.is（':checked'））{$（'.thm card status'）.attr（'checked'，'.thm card status'））.addClass（'thm-card-status-active'）；}else{$（'.open sub ja.distest（'div'）.removeClass（'someclass'）；}）；请编辑您的问题，而不是在评论中发布代码！你是说切换一个类<代码>$（'.thm复选框状态'）.change（function（）{$（this）.toggleClass（'thm-card-status-active'）；}）不幸的是，它没有工作。我使用iCheck（）来处理复选框。这会影响它吗？谢谢你，这看起来很有效。我知道StackOverflow不是一个代码编写服务。我还注意到，当使用类似iCheck（iCheck.fronteed.com）的东西来处理复选框时，它不起作用。
$('.thm-checkbox-status').change(function() {
    if($(this).is(':checked')) {
        $('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
    } else {
        $('.open_sub_ja').closest('div').removeClass('someclass');
    }
});

$("thm-checkbox-status:checkbox").on('change', function(){
        $(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});

$('.thm-checkbox-status').change(function(){
     $(this).closest('.thm-card-overlay').next().addClass('something');
});