Question

我有一个标签，我需要根据里面复选框的状态设置样式。不幸的是我受限于改变html结构！（最后的手段是javascriptsolution）。

是否可以使用html结构，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

＆＃13;

input{display:none;}
label{
 border: 1px solid #ddd;
      cursor: pointer;
      padding: 5px 20px;
}
input[type="radio"]:checked + label{
background:#000;
color:#fff;
}

＆＃13;

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

＆＃13;

样式标签与radiobutton里面

2 个答案: