股利變化時複選框被選中

Question

我仍然在學習jQuery和如何把它放在一起的背景顏色，但我有這樣的代碼在一個購物清單設置：

<div class="AddCheckedWrapper"> 
    <span>Check to Add to Cart</span> 
    <input name="atcuid" type="checkbox"> 
</div> 

我多麼希望這工作使用jquery，有.AddCheckedWrapper檢查複選框，並再次點擊它取消選中它。然後，如果該框被選中，則AddCheckedWrapper背景將變爲藍色。如果沒有檢查，那麼.AddCheckedWrapper背景會變成粉紅色。我遇到的問題雖然是1）我找不到編碼，會使div檢查並取消選中並更改背景顏色。 2）由於它是一個列表，所以有多個.AddCheckedWrapper，所以我知道$（this）將不得不以某種方式使用。如果您更改了其中的內容，我還會有一個數量框來檢查複選框。所以，如果我更改數量框中的數字，無論它將檢查複選框。所以背景顏色必須基於複選框被選中或不選中，這就是我遇到麻煩的地方。

Answer 1

您是對的，您可以使用引發事件的元素的this引用來遍歷DOM並找到相關的.AddCheckedWrapper。在這種情況下，您可以使用closest()方法查找元素，然後使用toggleClass()。

當行中的數量字段發生更改時，您也可以在複選框上提高change事件。試試這個：

$('.AddCheckedWrapper :checkbox').change(function() { 
 
    $(this).closest('.AddCheckedWrapper').toggleClass('checked', this.checked); 
 
}); 
 

 
$('.AddCheckedWrapper .qty').change(function() { 
 
    $(this).closest('.AddCheckedWrapper').find(':checkbox').prop('checked', this.value != 0).change(); 
 
});

.AddCheckedWrapper { 
 
    background-color: pink; 
 
} 
 
.AddCheckedWrapper.checked { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="AddCheckedWrapper"> 
 
    <label> 
 
    <span>Check to Add to Cart</span> 
 
    <input name="atcuid" type="checkbox"> 
 
    </label> 
 
    <input name="qty" type="number" class="qty" min="0"> 
 
</div> 
 
<div class="AddCheckedWrapper"> 
 
    <label> 
 
    <span>Check to Add to Cart</span> 
 
    <input name="atcuid" type="checkbox"> 
 
    </label> 
 
    <input name="qty" type="number" class="qty" min="0"> 
 
</div>