Reputation: 114
I am using a Jquery Accordion. I have inside each div 10 or more checkboxes. I am using Jquery to toggle the class and change the BG-color. I am also saving the status of each checkbox into a database. When the page loads again, it does show the correct status for each checkbox, but does not change the class, I believe because this happens on change. Also, I need to be able to change the header color if all the checkboxes in a div are checked. The Jquery I am using right now is
$('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
});
and the html is like
<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>
Upvotes: 3
Views: 243
Reputation: 8630
I think this sounds simple enough. You just want to "refresh" the class state of the fieldset on init, not just when changed.
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);
Upvotes: 2