根據複選框狀態更改標籤的顏色

-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

根據複選框狀態更改標籤的顏色

回答

相關問題