Question

我有很多复选框，95。它们都有相同的类，并被命名为数组。我需要将类从bg-primary更改为bg-success或其他颜色。我还需要能够在结尾说，“你错过了这个复选框＆＃39;。这就是我现在所处的位置

   <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);
});

Answer 1

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

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

DEMO

Answer 2

最后我使用了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);});

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

Answer 3

那么你应该使用.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

切换CheckBoxes和验证的类

3 个答案: