javascript - 如果选中复选框，则更改类 bg

Question

我正在制作我的投资组合网站，需要一些 jQuery 代码方面的帮助。我想要一个父类对其中的复选框使用react。在这种情况下，当复选框处于事件/选中状态时，背景颜色需要更改为 #000。

我不知道要添加哪一行代码才能使我的类对复选框使用react。我在谷歌上搜索了如何去做，但并没有变得更聪明。这可能是一件非常小的事情，但我希望能得到你们的帮助。

$("input[type='checkbox']").change(function() {
  if ($(this).is(":checked")) {
    $(this).parent();
  } else {
    $(this).parent();
  }
});

.product {
  background-color: #ccc;
  /* needs to change to #000 when active */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="product">
  <input class="check" type="checkbox" name="logo"> Logo 
</div>

Answer 1

基本上，您为事件状态创建第二个(更具体的)css 选择器，然后使用 jQuery 根据复选框值切换该状态/类。

https://jsbin.com/betafupogu/1/edit?html,css,js,output

CSS

.product {
  background-color: #ccc; /* needs to change to #000 when active */
}

.product.active {
  background-color: #000; 
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>

        $("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass('active'); 
    }else{
        $(this).parent().removeClass('active'); 
    }
});

</script>