jeudi 16 février 2017

Changing label's color, based on checkbox status

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.




Aucun commentaire:

Enregistrer un commentaire