Changing label's color, based on checkbox status

Question

I'm stuck with a few lines of code, and I'm unable to solve my issue, so I'm asking for your help.

I would like to change the label's color (id selectSubject), based on the status of checkboxes (French and German).

<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>

I had a look into CSS solutions but i don't understand how the operators work, such as <, >, ~, +, so I couldn't solve my problem.

So just to clarify, if none of the checkboxes is checked, the colour of selectSubject isn't changed, but if any of them is checked, it changes to a colour.

Hopefully these make sense, thanks very much in advance.

it doesn't work when your html is structured this way if you only want to use css. The checkboxes would have to be located before the label. You could use javascript to check the status and set the label accordingly. — deadfishli, Feb 16 '17 at 14:35
Your question doesn't make sense. How can you apply a color of `selectSubject` to a label? — ProEvilz, Feb 16 '17 at 14:36
Possible duplicate of [Highlight label if checkbox is checked](http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked) — Josh Lee, Feb 16 '17 at 14:37

score 0 · Accepted Answer · answered Feb 16 '17 at 14:48

0

jQuery version

What you need to do is capture the change event on your checkboxes and toggle a class.

(When they're clicked, add a css class)

You can do this with jquery like so.

$('#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');
});

Check this working DEMO

answered Feb 16 '17 at 14:48

ProEvilz

5,310
9
44
74

Thanks very much ! – leveeee Feb 16 '17 at 15:43
@leveeee Please accept the answer if this has helped you. Add an update to your post if you need further help. – ProEvilz Feb 16 '17 at 15:50
Okay, I'm sorry, I'm really new to this community and I need to learn a few things, but i'm trying my best. Thank you once again! – leveeee Feb 16 '17 at 15:58

score 0 · Answer 2 · answered Feb 16 '17 at 16:00

My final solution - based on ProEvilz answer.

                    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";
                        }
                      });
                    }

Changing label's color, based on checkbox status

2 Answers2