Question

我正在我的投资组合网站上工作，需要一些jQuery代码帮助。我希望父类对其中的复选框做出反应。在这种情况下，当复选框处于活动/选中状态时，背景颜色需要更改为#000。

我不知道要添加什么代码来使我的班级对复选框做出反应。我已经在Google上搜索了如何执行此操作，但没有变得更明智。这可能是一件很小的事情，但我希望能从你们那里得到一些帮助。

$("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>

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

1 个答案: