Question

我正在尝试通过使用JavaScript或CSS输入单选按钮来更改标签图像。

我已经在CSS中尝试过"input[type="radio"]:not(:checked) + label"，还尝试通过JavaScript进行更改。

我目前拥有的东西：

var service1 = document.getElementById('service1');
var service2 = document.getElementById('service2');
var service3 = document.getElementById('service3');

if(service1 == document.getElementById('service1').checked){
	document.getElementById('service2').src = "decent_rate_unchecked.png";
	document.getElementById('service3').src = "good_rate_unchecked.png";
}else if(service2 == document.getElementById('service2').checked){
	document.getElementById('service1').src = "bad_rate_unchecked.png";
	document.getElementById('service3').src = "good_rate_unchecked.png";
}else{
	document.getElementById('service2').src = "bad_rate_unchecked.png";
	document.getElementById('service3').src = "decent_rate_unchecked.png";
}

#service1 input[type="radio"]:not(:checked) + label{
	border: 5px solid black;
	border-radius: 25px;
}

<form action="Sources/form.php" method="post" id="container">
<label id="service">
<input type="radio" checked="checked" id="service1" name="service" value="1" required="required"/>
<label for="service1">
<img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service1" title="bad"/>
</label>
<input type="radio" id="service2" name="service" value="5,5" required="required"/>
<label for="service2">
<img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service2" title="decent"/>
</label>
<input type="radio" id="service3" name="service" value="10" required="required"/>
<label for="service3">
<img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service3" title="good"/>
</label>
</form>

预期结果将是图像变为图像的预制“未检查”状态，实际结果是什么都不会发生，除了如果选中它会出现黑色圆形边框的事实

Answer 1

这里不需要js，我看到HTML标记属性有很多问题，但是要解决您的问题，只需使用此代码，

form.service__rate label{
  display: inline-block;
  width: 42px;
  height: 42px;
}

#service1 + label{
/*background: url("./Sources/bad-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}
#service2 + label{
/*background: url("./Sources/decent-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}
#service3 + label{
/*background: url("./Sources/good-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}

#service1:checked + label {
/*background: url("./Sources/bad_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}
#service2:checked + label {
/*background: url("./Sources/decent_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}
#service3:checked + label {
/*background: url("./Sources/good_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}

<!-- HTML -->
<form action="Sources/form.php" method="post" id="container" class="service__rate">
<fieldset>
  <legend>Service rate:</legend>
  <input type="radio" checked="checked" id="service1" name="service" value="1" required="required"/>
  <label for="service1">
  </label>
  <input type="radio" id="service2" name="service" value="5,5" required="required"/>
  <label for="service2">
  </label>
  <input type="radio" id="service3" name="service" value="10" required="required"/>
  <label for="service3">
</label>
</fieldset>
</form>

通过无线电输入更改标签的图像

1 个答案: