チェックボックスのステータスに基づいてラベルの色を変更します。

Question

私はいくつかのコード行を残しています。問題を解決できないので、私はあなたの助けを求めています。

チェックボックス（フランス語とドイツ語）のステータスに基づいて、ラベルの色（id selectSubject）を変更したいとします。

<div id="chooseSubject" style="margin-bottom:24px;"> 
    <label id="selectSubject" class="form-control">Select your subject(s)</label> 
    <table style="width:auto;text-align:left;margin-bottom:1px;margin-top:13px" > 
     <tr>        
      <th style="font:inherit;padding-right:110px;"><input type="checkbox" id="french" style="display:none; position:absolute; left:9999px;"><label for="french"><span></span>French</label></th>    
      <th style="font:inherit;"><input type="checkbox" id="german" style="display:none; position:absolute; left:9999px;" class="1" value="1""><label for="german"><span></span>German</label></th> 
     </tr> 
    </table> 
</div> 

私は、CSSのソリューションに見ていたが、私はどのようにオペレーターの仕事を理解していない、など<として、>、〜、+ので、私は私の問題を解決することができませんでした。

チェックボックスが選択されていない場合、selectSubjectの色は変更されませんが、チェックされていれば色に変わります。

うまくいけば、これらの意味があります。ありがとうございます。

Answer 1

jQueryのバージョンが

何をする必要があるとあなたのチェックボックスの変更イベントをキャプチャし、クラスをトグルです。

（それらがクリックされている場合は、CSSクラスを追加）

あなたはそうのようなjQueryを使ってこれを行うことができます。

$('#french').on('change', function() { 
    //When fench checkbox is ticked, add this class, or remove it 
    $('#selectSubject').toggleClass('add-red-color'); 
}); 
$('#german').on('change', function() { 
    //When german checkbox is ticked, add this class, or remove it 
    $('#selectSubject').toggleClass('add-green-color'); 
}); 

チェックこの作業DEMO

Answer 2

私の最終的な解決策 - ProEvilzの回答に基づいて。

    var french = document.getElementById('french'); 
        var german = document.getElementById('german'); 
        var cbs = document.querySelectorAll('input[type=checkbox]'); 
        for(var i = 0; i < cbs.length; i++) { 
         cbs[i].addEventListener('change', function() { 
         if(german.checked || french.checked) { 
          document.getElementById("selectSubject").style.color = "black"; 
         } else { 
          document.getElementById("selectSubject").style.color = "#A9A9A9"; 
         } 
         }); 
        }