JQuery добавить класс, если он выбран для каждого ввода

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

Вместо $('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"); 
}); 

Answer 3

Вы можете попробовать .closest вместо этого.

Вы передаете селектор, поэтому его применение изменяется на весь элемент, который его удовлетворяет. Постарайтесь сделать его относительно this

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

Вы можете даже использовать .parent():

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

Вы можете обратиться следующую должность для получения дополнительной информации: Difference between jQuery parent(), parents() and closest() functions