css - 里面有单选按钮的样式标签

Question

我有一个标签，我需要根据内部复选框的状态设置样式。不幸的是，我对更改 html 结构有限制! (最后的手段是 javascript 解决方案)。

是否可以使用如下的 html 结构

.like-this {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 2px 4px;
}
.selected {
   background: red;
  color: white;
}

<label>
  <input type="radio" name="field_123" value="Yes" class="Radio-Button">
  I need same border
</label>
<label>
  <input type="radio" name="field_123" value="No" class="Radio-Button"">
  I need same border
</label>
<br/>
<span class="like-this">Not Selected</span>
<span class="like-this selected">Selected</span>

Answer 1

let form = document.querySelector( "form" );
form.addEventListener( "change", ( evt ) => {
  let trg = evt.target,
      trg_par = trg.parentElement;
  if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
    let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
    if ( prior ) {
      prior.parentElement.classList.remove( "checked" );
    }
    trg_par.classList.add( "checked" );
  }
}, false );

label {
  background: #ddd;
  padding: 2px 10px 2px 0;
  border: 1px solid #000;
}
label.checked {
  background: #000;
  color: white;
}
input{display:none;}

<form>
<label>
  <input type="radio" name="field_123" value="Yes" class="Radio-Button">
  I need same border
</label>
<label>
  <input type="radio" name="field_123" value="No" class="Radio-Button"">
  I need same border
</label>
</form>