切换CheckBoxes类和验证类

我有很多复选框，95.它们都具有相同的类并被命名为数组。我需要将课程从bg-primary更改为bg-success或其他颜色。我最后还需要说'你错过了这个复选框'。这是我在现在切换CheckBoxes类和验证类

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

这里，我使用失败是

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

来源

2016-04-29 Griehle

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

来源

2016-04-29 22:17:41

使用closest()让家长和bg-warningtoggle类Jquery的。

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

DEMO

来源

2016-04-29 16:25:59 RRK

是的，先生未选中的。那部分工作得很好..现在我该如何创建一个错过的数组？ – Griehle

最后我用的附加，为了从引导获得更好的搜索结果中删除类。从第一个答案借用我用

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

这给了更好的色彩效果，但它失去了，如果框变成选中切换回的能力。

来源

2016-04-29 22:12:40 Griehle

切换CheckBoxes类和验证类

回答

相关问题