选中复选框时更改父对象的背景

Change background of parent when checkbox is checked

本文关键字：对象 背景 复选框      更新时间：2023-09-26

当复选框被选中时，我试图改变它的父元素的背景。

这是我的JS:

var $boxes = $('#delivery-address-edit-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');
$boxes.each(function() {
  if ($(this).is(":checked")) {
    $(this).closest('label').toggleClass(".checked-checkbox-parent");
  }
});
#delivery-address-edit-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#delivery-address-edit-modal .modal-dialog .modal-content .modal-body form label {
  display: block;
  background: #C99C49;
  margin: 10px 0;
  cursor: pointer;
  padding: 20px;
}
.checked-checkbox-parent {
  background: black;
}
<label for="one-month">
  <input id="one-month" type="checkbox">
  <span>Monthly</span>
  <span class="pull-right">(£30/case)</span>
  <div class="clearfix"></div>
</label>

在chrome上的DOM查看器中，正如我所期望的那样：

表单>标签>复选框

因此，当我运行JS并选中复选框时，我希望标签的背景属性变为黑色，当它未选中时，我期望它恢复正常。

$(document).ready(function() {
  $('#one-month').change(function(e) {
    if ($(this).prop("checked")) {
      $(this).parent().addClass('checked-checkbox-parent');
    } else {
      $(this).parent().removeClass('checked-checkbox-parent');
    }
  });
});
#delivery-address-edit-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#delivery-address-edit-modal .modal-dialog .modal-content .modal-body form label {
  display: block;
  background: #C99C49;
  margin: 10px 0;
  cursor: pointer;
  padding: 20px;
}
.checked-checkbox-parent {
  background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="one-month">
  <input id="one-month" type="checkbox">
  <span>Monthly</span>
  <span class="pull-right">(£30/case)</span>
  <div class="clearfix"></div>
</label>

相关文章：