事業部は、チェックボックスが

Question

をチェックすると、私はまだjqueryのを学習し、どのようにそれをすべて一緒に置くことではなく、私は買い物リストに設定し、このコードを持っています背景色を変更します.AddCheckedWrapperはチェックボックスにチェックを入れ、もう一度クリックするとチェックが外されます。次に、ボックスがチェックされている場合.AddCheckedWrapperの背景が青色に変わります。チェックされていなければ、.AddCheckedWrapperの背景がピンクに変わります。私が持っている問題は1）私はdivチェックを行い、チェックを外して背景色を変更するコーディングを見つけることができません。 2）それはリストなので、1つ以上の.AddCheckedWrapperがあるので、私は$を知っています（これを）何らかの形で使用する必要があります。私はまた、あなたがその中にあるものを変更する場合、チェックボックスをチェックする数量ボックスを持っています。したがって、数量ボックスの数値を変更しても、チェックボックスをオンにします。だから、バックグラウンドの色は、チェックボックスのチェックに基づいて有効にする必要があります、それは私が問題を抱えている場所です。

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>