사업부는 체크 박스가

Question

내가 아직 어떻게 모두 함께 넣어하는 jQuery를 배우고있어 체크 배경 색상을 변경하지만 난 쇼핑 목록에 설정이 코드를 가지고 : 나는 일이 원하는 방법

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

인을 .AddCheckedWrapper 확인란을 선택하고 다시 클릭하면 선택이 취소됩니다. 그런 다음 상자가 선택되면 .AddCheckedWrapper 배경이 파란색으로 바뀝니다. 체크되지 않은 경우 .AddCheckedWrapper 배경이 분홍색으로 변경됩니다. 내가 가지고있는 문제는 1) div 체크를하고 체크를 풀고 배경색을 바꿀 코딩을 찾을 수 없다. 2) 목록이므로 하나 이상의 .AddCheckedWrapper가 있으므로 $ (this)가 어떻게 든 사용해야합니다. 또한 상자에있는 내용을 변경하면 확인란을 선택하는 수량 상자가 있습니다. 따라서 수량 상자의 숫자를 변경하더라도 상관없이 확인란을 선택합니다. 그래서 배경색은 체크 박스가 체크되어 있는지 여부에 따라 영향을 받아야하는데, 그게 문제가되는 곳입니다.

Answer 1

DOM을 트래버스하고 관련 .AddCheckedWrapper을 찾으려면 이벤트를 발생시킨 요소에 대한 참조 번호 this을 사용하는 것이 맞습니다. 이 경우 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>