html - 选择子单选按钮时更改标签 CSS(不使用 javascript/jquery)？

Question

我正在使用 Kendo MVVM，我想在选中标签的子单选按钮时更改标签的 CSS。我的 HTML 设置如下:

<label class="oneToOne typeBlock" data-bind="css: { selected: SubType == 'onetoone' }">
  <input name="transformType" class="hidden" type="radio" value="onetoone" data-bind="checked: SubType" />
  <span class="typeDescription">One to One</span>
</label>

<label class="expression typeBlock" data-bind="css: { selected: SubType == 'expression' }">
  <input name="transformType" class="hidden" type="radio" value="expression" data-bind="checked: SubType" />
  <span class="typeDescription">Expression</span>
</label>

此设置的工作原理是在我的模型中属性 SubType 的值在单击标签时设置为 onetoone 或 expression，但是当满足指定条件时标签没有得到 selected 类。有没有办法做到这一点？还是 CSS 数据绑定(bind)只适用于严格的 bool 值？

Answer 1

此代码在检查输入后更改范围的样式。

input:checked + span {
  color: red;
}

input:checked + span {
  color: red;
}

<label class="oneToOne typeBlock" data-bind="css: { selected: SubType == 'onetoone' }">
  <input name="transformType" class="hidden" type="radio" value="onetoone" data-bind="checked: SubType" />
  <span class="typeDescription">One to One</span>
</label>

<label class="expression typeBlock" data-bind="css: { selected: SubType == 'expression' }">
  <input name="transformType" class="hidden" type="radio" value="expression" data-bind="checked: SubType" />
  <span class="typeDescription">Expression</span>
</label>