根据复选框状态更改标签的颜色

-2

我被困在几行代码中，我无法解决我的问题，所以我要求您的帮助。根据复选框状态更改标签的颜色

我想根据复选框（法语和德语）的状态更改标签的颜色（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的颜色不会被改变，但是如果它们中的任何一个被选中，它就会变为颜色。

希望这些都有道理，非常感谢。

来源

2017-02-16 leveeee

如果您只想使用css，当您的html以这种方式构建时，它不起作用。复选框必须位于标签之前。您可以使用javascript来检查状态并相应地设置标签。 – deadfishli

你的问题没有意义。你如何将'selectSubject'的颜色应用于标签？ – ProEvilz

可能重复[突出标签，如果复选框被选中]（http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked） –

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

来源

2017-02-16 14:48:47 ProEvilz

非常感谢！ – leveeee

@leveeee如果这对你有帮助，请接受答案。如果您需要更多帮助，请添加更新到您的帖子。 – ProEvilz

好的，我很抱歉，我对这个社区真的很陌生，我需要学习一些东西，但我正在努力。再一次感谢你！ – leveeee

我的最终解决方案 - 基于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"; 
         } 
         }); 
        }

来源

2017-02-16 16:00:31 leveeee

根据复选框状态更改标签的颜色

回答

相关问题