选中时更改标签颜色收音机

Question

我在检查收音机后如何将单选按钮的标签文字颜色更改为蓝色时遇到问题。我已经遵循了许多示例代码，但它不会工作。

以下是我的HTML代码

std::pair

Answer 1

您需要稍微改变一下HTML结构。使用 ~ （General Sibling Combinator）选择器，例如：

.radio-custom:checked ~ label {
  color: blue;
}

请看下面的代码段：

.radio-custom:checked ~ label {
  color: blue;
}

label {
  display: block;
  flex: 1;
}

.input-group {
  display: block;
}

.text-group-field {
  padding: 10px;
}

.inner-block {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

<div class="input-group">
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-1" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-2" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-3" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-3" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
</div>

希望这有帮助！

Answer 2

希望这会有所帮助。适用于所有具有班级radio-custom的单选按钮。仅将blue颜色设置为选定的单选按钮标签。

＆＃13;

＆＃13;

window.onload = function () {
	[].forEach.call(document.querySelectorAll(".radio-custom"), function (el) {
		el.addEventListener("click", function () {
			[].forEach.call(document.querySelectorAll(".radio-custom-label"), function(label){
				label.style.color = "black";
			});

			document.querySelector("label[for='" + this.id + "']").style.color = "blue";
		});
	});
}

＆＃13;

<div class="input-group">
	<label for="pickup-1" class="radio-custom-label">10.00 PM</label>
	<div class="text-group-field pickup-day choose-time">
		<input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
	</div>
</div>

<div class="input-group">
	<label for="pickup-2" class="radio-custom-label">11.00 PM</label>
	<div class="text-group-field pickup-day choose-time">
		<input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将change事件添加到单选按钮。在该事件中，将label标记与广播的id匹配。使用document.querySelector，然后将css类添加到元素

＆＃13;

＆＃13;

document.getElementById('pickup-1').addEventListener('change', function() {
  document.querySelector('label[for="pickup-1"]').classList.add('colorText')
})

＆＃13;

.colorText {
  color: blue;
}

＆＃13;

<div class="input-group">
  <label for="pickup-1" class="radio-custom-label">10.00 PM</label>
  <div class="text-group-field pickup-day choose-time">
    <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

更接近参考图像的结果。

<强> check out here

<div class="input-group">


 <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
 <label for="pickup-1" class="radio-custom-label">10.00 PM</label>

 <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
 <label for="pickup-2" class="radio-custom-label">20.00 PM</label>

</div>

和css

.input-group{
 background: #323447;
 padding: 10px;
 width: 100%;
 box-sizing: border-box;
 }

 input[type=radio]{
  display: none;
 }

.radio-custom-label{
 width: 200px;
 padding: 10px;
 display: block;
 background: rgba(255,255,255,0.1);
 color:#ddd;
 font-weight: 600;
 cursor: pointer;
 margin-bottom: 5px;
 }

 .radio-custom-label::after{
  width:15px;
  height: 15px;
  background: green;
  display: inline-block;
  content: "";
  position:relative;
  float: right;
  border-radius: 15px;
  display: none;
  }

  input[type=radio]:checked+.radio-custom-label::after{
  display: block;
  }