JQuery add class if selected for each input

Question

I currently use the following jQuery code to add a class if the input type checkbox is checked. But it adds the class to all elements even if they are not checked.

How can I solve this?

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>

"also the ones that are not checked" - and how does `$('div.checkbox.product-option')` signify only the checked elements? — nicael, Jun 06 '16 at 14:45

score 5 · Accepted Answer · answered Jun 06 '16 at 14:45

product-option is the parent container of checkbox. To get the current product-option, you need to use .closest(".product-option") selector

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

score 2 · Answer 2 · edited May 23 '17 at 12:08

You can try .closest instead.

You are passing selector, hence its applying changes to all element that satisfies it. Try to make it relative to this

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

You can even use .parent():

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

You can refer following post for more information: Difference between jQuery parent(), parents() and closest() functions

score 0 · Answer 3 · answered Jun 06 '16 at 14:44

Instead of $('div.checkbox.product-option').addClass("selected"); which will select all the elements with that class just use this and find the checkboxes closest ancestor with that class.

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 add class if selected for each input

3 Answers3