CheckBoxとチェックのToggleクラス

Question

私はたくさんのチェックボックス、95を持っています。それらはすべて同じクラスを持ち、配列として名前が付けられています。クラスをbg-primaryからbg-successまたは他の色に変更する必要があります。私はまた、最後に「あなたはこのチェックボックスを逃しました」と言うことができる必要があります。これは私が今

<h3 class = "col-lg-12 text-center bg-warning "><a href="#">STEP 5 - Under the hood</a></h3> 
    <div id= "acc4"> 
    <form> 
    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="78">Check oil condition and level 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="79">Check coolant condition and level 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="80">Check trans fluid condition and level 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="81">Check power steering fluid condition and level 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="82">Check brake fluid condition and level 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="83">Fill washer fluid resevoir 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="84">Battery hold down 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="85">Check battery &amp; charging system 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-primary"> 
     <input type="checkbox" class="box " name="checkBox[]" id="86">Inspeect belts 
    </fieldset> 

とjQueryで午前どこが失敗し使用していますのは、親とtoggleクラスbg-warningを取得するために

$('input[type=checkbox]').on('change', function() { 
    $(this).toggleClass('form-horizontal form-group bg-warning', this.checked); 
}); 

Answer 1

これは、クラスを適用する場所であるため、.closest('fieldset')を使用する必要があります。

$('input[type=checkbox]').on('change', function() { 
    $(this).closest('fieldset') 
     .removeClass('bg-primary') // remove the bg-primary once clicked 
     .toggleClass('bg-warning', !this.checked) // show warning when un-checked 
     .toggleClass('bg-success', this.checked); // show success when checked 
}); 

そして最終用途

$('input[type=checkbox]').not(':checked') // add .closest('fieldset') if you need to target the containers again 

Answer 2

使用closest()です。最後に

$('input[type=checkbox]').on('change', function() { 
    $(this).closest('.form-horizontal.form-group').toggleClass('bg-warning', this.checked); 
}); 

DEMO

Answer 3

私は、ブートストラップからより良い結果を得るためにクラスを追加および削除に使用。私は

$('input[type=checkbox]').on('change', function() { 
$(this).closest('.form-horizontal.form-group').removeClass('bg-info', this.checked).addClass('bg-success', this.checked);}); 

を使用最初の答えからの借入これは、より良い色の結果を与えたが、それはボックスがオフになった場合にスイッチバックする能力を失いました。