在同一组中具有不同外观的单选按钮

Having different appearance of radio buttons within same group

本文关键字：外观 单选按钮 一组      更新时间：2023-09-26

我有几组单选按钮。我想改变一组中只有几个单选按钮的外观，其余的就像单选按钮一样。有没有一些javascript或jquery…

<div id = "radio1">
<p>Do you like to walk?</p>
<input type="radio" value="a" name="radgrp1"/> Yes <br />
<input type="radio" value="b" name="radgrp1"/> No <br /> 
<input type="radio" value="c" name="radgrp1"/> Clear <br />
</div>
<div id = "radio2">
<p>Would you prefer to walk without effort?</p>
<input type="radio" value="a" name="radgrp2"/> Yes <br />
<input type="radio" value="b" name="radgrp2"/> No <br /> 
<input type="radio" value="c" name="radgrp2"/> Clear <br />
</div>

在上面的代码中，我更喜欢每个选项中的第三个单选按钮显示为正常按钮，同时保留第一个和第二个单选按钮。正在寻找一个适用于Internet Explorer 6的解决方案。感谢

更新：在w3schools阅读标签标签和css显示属性时获得了解决方案对于每个div中的第三个单选按钮，我为其分配了一个id｛rad[0]，rad[1]｝，并使用标签指向该id。（label）"For"后面的是我们正在为其分配标签的html元素的"id"。

<div id = "radio1">
<p>Do you like to walk?</p>
<input type="radio" value="a" name="radgrp1"/> Yes <br />
<input type="radio" value="b" name="radgrp1"/> No <br /> 
<input type="radio" value="c" name="radgrp1"id="rad[0]" style="display:none;"/>
<label for="rad[0]"><input type ="button"value="Clear"/></label>
</div>
<div id = "radio2">
<p>Would you prefer to walk without effort?</p>
<input type="radio" value="a" name="radgrp2"/> Yes <br />
<input type="radio" value="b" name="radgrp2"/> No <br /> 
<input type="radio" value="c" name="radgrp2"id="rad[1]" style="display:none;"/>
<label for="rad[1]"><input type ="button"value="Clear"/></label>
</div>

我用按钮作为单选按钮的标签，但图像也可以用同样的方式添加。代替

<input type ="button"value="Clear"/>,

在打开和关闭标签标签之间使用<img src="yourimage.png">。

是的，您可以只更改组中少数单选按钮的外观，其余按钮与单选按钮一样。

      radio=document.getElementByName("radgrp1");

然后将您的设置应用于任何单选按钮

      radio[0]------>for first radio buton
      radio[1]------>for second
      radio[2]------>for third
相关文章：