单选按钮：一次只检查一个按钮

Question

我正在使用单选按钮之类的图像。 当我单击图像时，上一个仍保持选中状态； 仅当我停止单击另一个时，它才变为未选中状态。

一旦我点击其中一个，是否可以使其他“未经检查”？

谢谢大家。

[type=radio] { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

[type=radio]:checked + img {
    border:2px solid blue; 
}    

<label>
    <input type="radio" name="test" value="trasl">    
    <img class="immaiuto" src="_Immagini/trasloco.jpg"/>
</label>

Answer 1

在每个单选按钮上使用相同的名称，并且可以使用其他值。另外，每对input/img都必须使用自己的标签。

[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[type=radio]:checked + img {
  border:2px solid blue; 
}   

<label>
  <input type="radio" name="test" value="trasl">    
  <img class="immaiuto" src="https://loremflickr.com/50/50?random=2"/>
</label>
<label>
  <input type="radio" name="test" value="tras2">    
  <img class="immaiuto" src="https://loremflickr.com/50/50?random=2"/>
</label>
<label>
  <input type="radio" name="test" value="tras3">    
  <img class="immaiuto" src="https://loremflickr.com/50/50?random=3"/>
</label>

Answer 2

确保所有JVM_ARGS="-Dhttps.proxyHost=myproxy.com -Dhttps.proxyPort=8080" jmeter\bin\jmeter.bat按钮都具有相同的radio属性。另外，还要确保每个单选按钮和img都包裹在它们自己的name标签中，以使其在单击图像时也被选中。

请参见下面的工作示例：

label

img {
  height: 100px;
  width: 100px;
}

[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[type=radio]:checked+img {
  border: 2px solid blue;
}

Answer 3

<input id='radID' type='radio'>和<label for='radID'>

1. 确保所有无线电名称属性匹配。这使无线电组共享一个互斥状态（一个处于活动状态，另一个必须处于非活动状态。

2. 此外，给收音机提供唯一的ID，并将其与具有相应for属性的标签配对，这些标签将为用户提供更大的醒目区域。

3. 顺便说一句，如果您不希望在单击按钮时从按钮中产生刺痛的抽搐，请用轮廓线代替边​​框。就像填充和边距一样，边框会占用空间，但轮廓不会。

---

演示

[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

img {
  display: block;
  width: 200px;
  height: auto
}

[type=radio]:checked+label img {
  outline: 2px solid blue;
}

<input id='t1' name="test" type="radio" value="tras1">
<label for='t1'>
   <img class="immaiuto" src="https://www.caturanotraslochi.com/wp-content/uploads/2018/02/Trasloco-pesante_2-1200x843.jpg"/>
</label>


<input id='t2' name="test" type="radio" value="tras2">
<label for='t2'>
   <img class="immaiuto" src="https://www.caturanotraslochi.com/wp-content/uploads/2018/02/Trasloco-pesante_2-1200x843.jpg"/>
</label>

Answer 4

已解决：解决方案是jQuery：

$(".image").click(
     function() {
       $(".insert").stop().fadeTo( "slow" , 1, function() {
     });
});