切换复选框和验证的类

Toggle class for CheckBoxes plus validations

本文关键字：验证 复选框      更新时间：2023-09-26

我有很多复选框，95。它们都有相同的类，并以数组的形式命名。我需要将类从bg初级更改为bg成功或其他颜色。我还需要能够在最后说，"你错过了这个复选框"。这就是我现在所在的

   <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是

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

您应该使用.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

使用closest()获取父级和toggle类bg-warning。

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

DEMO

最后我使用了add和remove类，以便从Bootstrap中获得更好的结果。借用我使用的第一个答案

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

这样可以获得更好的颜色效果，但如果框未选中，则无法切换回原来的颜色。

相关文章：