Question

如果选中了输入类型复选框，我目前使用以下jQuery代码添加类。但它将类添加到所有元素，即使它们未被检查。

我该如何解决这个问题？

HTML：

<div class="checkbox product-option">
    <label for="addon1">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[1]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

<div class="checkbox product-option">
    <label for="addon2">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[2]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

<div class="checkbox product-option">
    <label for="addon3">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[3]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

jQuery的：

<script>
    jQuery(".checkbox-row").change(function() {
        if($(this).is(':checked')) 
            $('div.checkbox.product-option').addClass("selected"); 
        else 
            $('div.checkbox.product-option').removeClass("selected");
    });
</script>

Answer 1

product-option是复选框的父容器。要获取当前product-option，您需要使用.closest(".product-option")选择器

jQuery(".checkbox-row").change(function() {
  if ($(this).is(':checked'))
    $(this).closest(".product-option").addClass("selected");
  else
    $(this).closest(".product-option").removeClass("selected");
});

Answer 2

您可以尝试使用.closest。

您正在传递选择器，因此它将更改应用于满足它的所有元素。尝试使其相对于this

$(this).closest('div.checkbox.product-option').addClass("selected");

您甚至可以使用.parent()：

$(this).parent().addClass("selected");

您可以参考以下帖子获取更多信息：Difference between jQuery parent(), parents() and closest() functions

Answer 3

而不是$('div.checkbox.product-option').addClass("selected");将选择该类的所有元素，而只使用this并找到与该类最接近的祖先的复选框。

jQuery(".checkbox-row").change(function() {
    if($(this).is(':checked')) 
        $(this).closest('div.checkbox.product-option').addClass("selected"); 
    else 
        $(this).closest('div.checkbox.product-option').removeClass("selected");
});

如果为每个输入选择了JQuery，则添加类

3 个答案: