Question

希望在每个跨过一个复选框的范围内添加一个类，以便在选中该复选框时可以更改每个类的背景颜色。

我写了js。但是似乎无法让Jquery影响每个项目。

这也是创造这种效果的最好方法吗？

JQUERY：

$('.product-select input').change(function(){
            if($(this).is(":checked")) {
                $('.product-select .wpcf7-list-item').addClass("checkon");
            } else {
                $('.product-select .wpcf7-list-item').removeClass("checkon");
            }
        });

CSS：

.product-select {
    .wpcf7-list-item {
        width:30%;
        height:200px;
        background:red;
        display:inline-block;
        margin:0px auto;
    }

    .checkon {
        background:blue;
    }

}

HTML：

<div class="product-select">
     <span class="wpcf7-form-control-wrap checkbox-328"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first checkon"><input type="checkbox" name="checkbox-328[]" value="Flexible Benefits"><span class="wpcf7-list-item-label">Flexible Benefits</span></span><span class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Holiday &amp; Absence"><span class="wpcf7-list-item-label">Holiday &amp; Absence</span></span><span class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Employee Comms"><span class="wpcf7-list-item-label">Employee Comms</span></span><span class="wpcf7-list-item last checkon"><input type="checkbox" name="checkbox-328[]" value="Custom Build"><span class="wpcf7-list-item-label">Custom Build</span></span></span></span>
</div>

Answer 1

$('.product-select input').change(function() {  
  //get all the spans that are parents for the checkbox
  var $parentSpans = $(this).parents('span');

  if (this.checked) {
    $parentSpans.addClass('checkon');
  } else {
    $parentSpans.removeClass('checkon');
  }
});

.product-select .wpcf7-list-item {
  width: 30%;
  height: 200px;
  background: red;
  display: inline-block;
  margin: 0px auto;
}

.product-select .checkon {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-select">
  <span class="wpcf7-form-control-wrap checkbox-328"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first checkon"><input type="checkbox" name="checkbox-328[]" value="Flexible Benefits"><span class="wpcf7-list-item-label">Flexible Benefits</span></span>
  <span class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Holiday &amp; Absence"><span class="wpcf7-list-item-label">Holiday &amp; Absence</span></span><span class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Employee Comms"><span class="wpcf7-list-item-label">Employee Comms</span></span>
  <span class="wpcf7-list-item last checkon"><input type="checkbox" name="checkbox-328[]" value="Custom Build"><span class="wpcf7-list-item-label">Custom Build</span></span>
  </span>
  </span>
</div>

Answer 2

.closest('span.wpcf7-list-item')向上查找与选择器closest相匹配的第一个父对象的dom树

$('.product-select input').change(function() {
  if ($(this).is(":checked")) {
    $(this).closest('span.wpcf7-list-item').addClass("checkon");
  } else {
    $(this).closest('span.wpcf7-list-item').removeClass("checkon");
  }
});

.product-select .wpcf7-list-item {
  width: 30%;
  height: 200px;
  background: red;
  display: inline-block;
  margin: 0px auto;
}

.product-select .checkon {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-select">
  <span class="wpcf7-form-control-wrap checkbox-328"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first checkon"><input type="checkbox" name="checkbox-328[]" value="Flexible Benefits"><span class="wpcf7-list-item-label">Flexible Benefits</span></span>
  <span
    class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Holiday &amp; Absence"><span class="wpcf7-list-item-label">Holiday &amp; Absence</span></span><span class="wpcf7-list-item checkon"><input type="checkbox" name="checkbox-328[]" value="Employee Comms"><span class="wpcf7-list-item-label">Employee Comms</span></span>
    <span
      class="wpcf7-list-item last checkon"><input type="checkbox" name="checkbox-328[]" value="Custom Build"><span class="wpcf7-list-item-label">Custom Build</span></span>
      </span>
      </span>
</div>

Answer 3

我会这样做

$('.product-select input').change(function(){
    $('.product-select input:checked').parent().removeClass('checkon').addClass('checkon');
    $('.product-select input').not(':checked').parent().removeClass('checkon');
});

我删除（），然后添加以避免重复。

使用.each Jquery将类添加到复选框

3 个答案: