チェックボックスがオンの場合、チェックボックスのクラスを変更する

Question

Jqueryアコーディオンを使用しています。私は各div内に10個以上のチェックボックスを持っています。 Jqueryを使用してクラスを切り替え、BG色を変更しています。また、各チェックボックスのステータスをデータベースに保存しています。ページが再びロードされると、各チェックボックスの正しいステータスが表示されますが、クラスは変更されません。これは変更に伴って発生するためです。また、div内のすべてのチェックボックスがチェックされている場合、ヘッダの色を変更できる必要があります。現在使用しているJqueryは

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

}です。

とhtmlは、私は、これは十分に簡単に聞こえると思います

<div id="Accordion1"> 
<h3 class = "col-lg-12 text-center bg-warning "><a href="#">Step 1 </a></h3> 

<div id= "acc1"> 
    <form role="form" action="pdi-run.php" method="post" name='details'> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="1" onClick="checkval(this)" <?php echo $boxes[1] ? 'checked = "checked"' : '' ?>>Inspected 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="2" onClick="checkval(this)"<?php echo $boxes[2] ? 'checked = "checked"' : '' ?>>All 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="3" onClick="checkval(this)"<?php echo $boxes[3] ? 'checked = "checked"' : '' ?>>All 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="4" onClick="checkval(this)"<?php echo $boxes[4] ? 'checked = "checked"' : '' ?>>Trunk 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="5" onClick="checkval(this)"<?php echo $boxes[5] ? 'checked = "checked"' : '' ?>>aligns 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="6" onClick="checkval(this)"<?php echo $boxes[6] ? 'checked = "checked"' : '' ?>>present 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="7" onClick="checkval(this)"<?php echo $boxes[7] ? 'checked = "checked"' : '' ?>>cracks 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="8" onClick="checkval(this)"<?php echo $boxes[8] ? 'checked = "checked"' : '' ?>>Front 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="9" onClick="checkval(this)"<?php echo $boxes[9] ? 'checked = "checked"' : '' ?>>Weather 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="10" onClick="checkval(this)"<?php echo $boxes[10] ? 'checked = "checked"' : '' ?>>Key 
    </fieldset> 

    <textarea class= "form-control notes" name="notes[]" data-num="1" onChange="getVal(this)" placeholder = "If any of the above items were etc."><?php echo $notes[1] ? $notes[1] : '' ?></textarea> 

</div> 

Answer 1

のようなものです。変更されたときだけでなく、initのフィールドセットのクラス状態を「リフレッシュ」したいだけです。

function refreshCheckboxes() { 
$(this).closest('fieldset') 
    // Your second parameter, I believe, wasn't actually doing anything 
    .removeClass('bg-info'); 
    .toggleClass('bg-warning', !this.checked) // show warning when un-checked 
    .toggleClass('bg-success', this.checked); // show success when checked 
} 
$('input[type=checkbox]').on('change', refreshCheckboxes).each(refreshCheckboxes);