javascriptは即座に背景を変更します

Question

私はこの進行状況バーを動作させています。私は、チェックボックスの多くがチェックされたときに色が変化しているとの問題を抱えています唯一の事...

0-3 background = red 
4-7 = yellow 
8-10 = Green 

マイCSS

.progress-bar-wrapper .progress-bar-filling { 
height: 100%; 
color: #fff; 
text-align: right; 
width: 0; 
background-color: #39b54a; 
border-radius:20px; 
} 

.progress-bar-wrapper .progress-bar-percent { 
font-weight: 400; 
font-family: sans-serif; 
color: #626162; 
padding-top: 6px; 
display: block; 
} 

私のHTML/Javascriptの

<div id="yyy"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<div> 
<script> 

window.onload = xxx; 


function xxx() 
{ 
var zzz = $(".check_id:checked").length; 
document.getElementById("insert").innerHTML = zzz 


$(document).ready(function(){ 
function progress(percent, $element) { 
var progressBarWidth = percent * $element.width()/100; 
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300) 

jFiddleはこちらJfiddle ありがとう

Answer 1

あなたはすでにk今、あなたはあなたの進行状況バーの背景色を設定するには（あなたのCSSで）3つの新しいクラスを追加することができます:checked checkboxers数：あなたのjavascriptコードインサイド

.progress-bar-wrapper .progress-bar-filling.fill0 { 
    background-color: red; 
} 
.progress-bar-wrapper .progress-bar-filling.fill1 { 
    background-color: yellow; 
} 
.progress-bar-wrapper .progress-bar-filling.fill2 { 
    background-color: #39b54a; 
} 

- 最初 - すべてfill0,fill1,fill2のクラスを削除し、そして - あなたが持っている数に基づいて - だけで、関連するクラスを追加します。ここでは

$('.progress-bar-filling').removeClass('fill0 fill1 fill2'); 
if (zzz <= 3) { 
    $('.progress-bar-filling').addClass('fill0') 
} else if (zzz <= 7) { 
    $('.progress-bar-filling').addClass('fill1') 
} else { 
    $('.progress-bar-filling').addClass('fill2') 
} 

は実施例である：
https://jsfiddle.net/g4Lhvawq/

Answer 2

ヨあなたはいいえをチェックできます。チェックボックスのチェックボックスに$(".check_id:checked").lengthを入力し、background-color cssプロパティだけを変更します。

<div id="yyy"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<input type="checkbox" class="check_id" onclick="xxx()" checked> 
<input type="checkbox" class="check_id" onclick="xxx()"> 
<div> 
<script> 

window.onload = xxx; 


function xxx() 
{ 
    var zzz = $(".check_id:checked").length; 
    document.getElementById("insert").innerHTML = zzz 


    $(document).ready(function(){ 
    function progress(percent, $element) { 
     var progressBarWidth = percent * $element.width()/100; 
     $element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300) 
     //.html(percent + "%&nbsp;"); 

     $('.progress-bar-percent').html(percent + "%&nbsp;"); 

     // calculate color 
     if($(".check_id:checked").length <= 3) 
     { 
     $("#progress-bar-filling").css("background-color","red"); 
     } 
     else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7) 
     { 
      $("#progress-bar-filling").css("background-color","yellow"); 
     }  
     else if($(".check_id:checked").length >= 8 && $(".check_id:checked").length <= 10) 
     { 
      $("#progress-bar-filling").css("background-color","green"); 
     } 
    } 

    var complete = zzz+'0'; 
    progress(complete, $('#progress-bar')); 
}) 
} 




</script> 
<p id="insert"></p> 

<div class="progress-bar-wrapper"> 
    <div id="progress-bar"> 
    <div id="progress-bar-filling" class="progress-bar-filling"></div> 
    </div> 
    <div class="progress-bar-percent"></div> 
</div> 

例：あなたはdocument.readyを使用している場合は、オンロードを必要としないhttps://jsfiddle.net/tLq07L77/1/