Question

我正在使用div构建表格列和行。出于特定原因并在Javascript中构建它

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

以下是列

中每行的渲染html

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

我需要做什么才能设置选中的复选框w / text为粗体（默认）和未选中复选框w / text为浅灰色而不是粗体？

看起来每个标签的font-weight为700，那么我如何根据复选框是否被选中来更改？

Answer 1

已经（很可能）回复了很多帖子，这里有一个，（How to style checkbox using CSS?）

使用css选择器input:checked{}，然后将样式应用于基础元素

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

如何根据检查状态使我的div中的文本和复选框变为粗体和浅灰色

1 个答案:

HTML

CSS