Изменение цвета ярлыка на основе статуса флажка

-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

Это не работает, если ваш html структурирован таким образом, если вы хотите использовать только css. Флажки должны быть расположены перед меткой. Вы можете использовать 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

Изменение цвета ярлыка на основе статуса флажка

ответ

Смежные вопросы