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解决方案，但我不明白运算符是如何工作的，例如＆lt;，＆gt;，〜，+，所以我无法解决我的问题。

所以只是为了澄清，如果没有选中复选框，则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";
                        }
                      });
                    }

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

2 个答案: