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

Question

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

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

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

https://jsfiddle.net/L2m9b3wj/

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')向上查找与选择器最接近的第一个父级的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');
});

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