选中 input[type='radio'] 时更改标签的背景颜色答案

【问题标题】：Change background colour of a label when input[type='radio'] is checked选中 input[type='radio'] 时更改标签的背景颜色
【发布时间】：2019-11-15 17:26:00
【问题描述】：

我正在尝试在检查 input[type='radio'] 时更改标签的背景颜色。这是我的 HTML：

<div class="type">
  <ul id="id_type">
    <li><label for="id_type_0"><input type="radio" name="type" value="inc" required="" id="id_type_0" checked="">
      Income</label>
    </li>
    <li><label for="id_type_1"><input type="radio" name="type" value="exp" required="" id="id_type_1">
      Expense</label>
    </li>
  </ul>
</div>

...如您所见，标签包裹了无线电输入。

这是我正在使用的选择器：

.type input[type=radio]:checked ~ label {
  background-color:#e0e0e0;
}

但是没有成功。

我该如何解决这个问题？

我无法更改 HTML，它是由 Django 生成的。

【问题讨论】：

标签： javascript css

【解决方案1】：

    .type input[type=radio]:checked+label {
        background-color: #e0e0e0;;
    }

<div class="type">
    <ul id="id_type">
        <li>
            <input type="radio" name="type" value="inc" required="" id="id_type_0" checked="">
            <label for="id_type_0">Income</label>
        </li>
        <li>
            <input type="radio" name="type" value="exp" required="" id="id_type_1">
            <label for="id_type_1">Expense</label>
        </li>
    </ul>
</div>

【讨论】：

【解决方案2】：

因为您的无线电输入在标签内。检查这个；

var inputs = document.querySelectorAll("input[type=radio]");
 Array.from(inputs).forEach(function(elem){
 
   elem.addEventListener('change',function(a){

     Array.from(inputs).forEach(function(z){
     if(z.parentNode.classList.contains("yourClass")){
       z.parentNode.classList.remove("yourClass")
     }
     });
    
     a.target.parentNode.classList.add("yourClass");
   })
 });

.yourClass{
  background-color: #e0e0e0;
}

<div class="type">
  <ul id="id_type">
    <li><label for="id_type_0"><input type="radio" name="type" value="inc" required="" id="id_type_0" checked="">
      Income</label>
    </li>
    <li><label for="id_type_1"><input type="radio" name="type" value="exp" required="" id="id_type_1">
      Expense</label>
    </li>
  </ul>
</div>

【讨论】：

我无法更改 HTML，它是由 Django 生成的。