How to make the text and checkbox in my div bold and light grey depending on check status

2
votes

I'm building a tables columns and rows with divs. For specific reasons and constructing it in Javascript like so

column.append('<div class="maRow"><label><input ' + IsChecked + ' type="checkbox" name="maCheckBox" data-parent=' + val.ParentID+ ' value=' + val.GroupNameID + '> ' + val.GroupName + '</label></div>');

Here is the rendered html for each row in the columns

<div class="maRow">
  <label>
    <input checked="" type="checkbox" name="maCheckBox" data-parent="0" value="21312">Some Text</label>
</div>

What do I need to do so that I can set checked checkboxes w/ text to bold (default) and unchecked checkboxes w/ their text to light grey and not bold?

It looks like the font-weight is 700 for each label, so how would I change that based on whether the checkbox is checked or not?

1
javascriptjqueryhtmlcsscheckbox
are you trying something like this jsfiddle.net/vozpba1c? – Sushil

1 Answers

1
votes

Already answered in (probably) many posts, here is one, (How to style checkbox using CSS?)

Use the css selector input:checked{} then apply styling to underlying elements

HTML

<div class="maRow">
  <label>
    <input checked="" type="checkbox" name="maCheckBox" data-parent="0" value="21312"><span>Some Text</span></label>
</div>

CSS

.maRow input[type=checkbox] + span{
  font-weight:normal;
  color: gray;
}

.maRow input[type=checkbox]:checked + span{
  font-weight:bold;
  color:black;
}