Question

我有一系列8个复选框。每个复选框都有自己的标签，标签只有一种背景颜色。我需要添加一个新类，它将更改所选复选框的不透明度，然后如果用户取消选中复选框，则将不透明度更改回原始不透明度。我已经设置了一个小提琴，当我选择一个复选框时，我将一个类添加到父元素，但它并不完全是我需要的。您将看到它将类添加到顶级div而不是单个复选框div容器。

http://jsfiddle.net/AftyD/1/

.red {
background-color:red;
}
.opaque {
opacity: 0.5;
}



<div class="form-checkboxes" id="edit-submitted-click-the-looks-you-would-wear">
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Boho">
    <input type="checkbox" class="form-checkbox" value="Boho" name="submitted[click_the_looks_you_would_wear][Boho]" id="edit-submitted-click-the-looks-you-would-wear-1">
    <label for="edit-submitted-click-the-looks-you-would-wear-1" class="option"><span class="red">Label 1</span> 
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Classic">
    <input type="checkbox" class="form-checkbox" value="Classic" name="submitted[click_the_looks_you_would_wear][Classic]" id="edit-submitted-click-the-looks-you-would-wear-2">
    <label for="edit-submitted-click-the-looks-you-would-wear-2" class="option"><span class="red">Label 2</span>
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Earthy">
    <input type="checkbox" class="form-checkbox" value="Earthy" name="submitted[click_the_looks_you_would_wear][Earthy]" id="edit-submitted-click-the-looks-you-would-wear-3">
    <label for="edit-submitted-click-the-looks-you-would-wear-3" class="option"><span class="red">Label 3</span> 
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Fashionista">
    <input type="checkbox" class="form-checkbox" value="Fashionista" name="submitted[click_the_looks_you_would_wear][Fashionista]" id="edit-submitted-click-the-looks-you-would-wear-4">
    <label for="edit-submitted-click-the-looks-you-would-wear-4" class="option"><span class="red">Label 4</span>
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Feminine">
    <input type="checkbox" class="form-checkbox" value="Feminine" name="submitted[click_the_looks_you_would_wear][Feminine]" id="edit-submitted-click-the-looks-you-would-wear-5">
    <label for="edit-submitted-click-the-looks-you-would-wear-5" class="option"><span class="red">Label 5</span>
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Nautical">
    <input type="checkbox" class="form-checkbox" value="Nautical" name="submitted[click_the_looks_you_would_wear][Nautical]" id="edit-submitted-click-the-looks-you-would-wear-6">
    <label for="edit-submitted-click-the-looks-you-would-wear-6" class="option"><span class="red">Label 6</span> 
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sophisticated">
    <input type="checkbox" class="form-checkbox" value="Sophisticated" name="submitted[click_the_looks_you_would_wear][Sophisticated]" id="edit-submitted-click-the-looks-you-would-wear-7">
    <label for="edit-submitted-click-the-looks-you-would-wear-7" class="option"><span class="red">Label 7</span>
    </label>
</div>
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sporty">
    <input type="checkbox" class="form-checkbox" value="Sporty" name="submitted[click_the_looks_you_would_wear][Sporty]" id="edit-submitted-click-the-looks-you-would-wear-8">
    <label for="edit-submitted-click-the-looks-you-would-wear-8" class="option"><span class="red">Label 8</span> 
    </label>
</div>

(function ($) {

$(document).ready(function ($) {
    $(".form-checkboxes").find('input').click(function () {
        if ($(this).is(":checked")) $(this).parent().parent().addClass('opaque')
        else $(this).parent().parent().removeClass('opaque')
    });
});

}(jQuery));

有人可以看看，让我知道如何才能做到这一点？它适用于Drupal 7网站，因此我无法在小提琴的HTML部分进行太多改动。

谢谢！

Answer 1

将parent().parent()更改为next()。

您要更改的元素是兄弟，而不是父级。

http://jsfiddle.net/AftyD/4/

我没有注意到评论，使用parent()会为标签和复选框设置不透明度。我只为标签设置不透明度。所以，不管你的目标是什么。

需要帮助改变/取消改变复选框标签opacity与javascript

1 个答案: