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

我认为这听起来很简单。你只想＆＃34;刷新＆＃34; 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);

如果选中，则在加载时更改复选框类

1 个答案: