使用文本作为单选按钮/将字符串变成单选按钮

Posted 2023-03-27

【中文标题】使用文本作为单选按钮/将字符串变成单选按钮

【英文标题】：Use text act as a radio button / Make string into a radio button

【发布时间】：2013-08-25 00:55:06

【问题描述】：

我想让文本作为 html 的单选按钮工作，因此当我单击一个选项（文本）时，它会从多个选项中突出显示（选中）并传递价值。

【问题讨论】：

***.com/questions/13061380/…的可能重复

您想让一段文本（比如一个跨度）表现得像一个单选按钮？您所描述的内容听起来很像带有size 属性的select，您知道吗？而且我不明白您所说的“使价值向前发展”是什么意思。不管怎样，你试过什么？

是的，你是对的，我只希望文本跨度像单选按钮一样工作，并且通过携带值意味着当我单击（选择）我想要以文本形式出现的单选按钮时，它应该像提交时实际选中的单选按钮一样传递它的值。

听起来还是像select 带有size 属性...

是的，但不完全选择标签，这里是页面的链接hashtaginc.us/Projects/Relax/sss.html 查看选项，我想让它们像单选按钮一样工作。当我单击它时，它应该突出显示（选中）

【参考方案1】：

最直接的方法是简单地使用单选按钮，您可以将其设为不可见。然后将文本转换为单选按钮的标签。 我将每个单选按钮及其标签放在一个包装器中，以便更轻松地定位它们。

<div class="radiowrapper" id="wrap1">
    <input type="radio" name="problem" value="headaches" id="problem1">
    <label for="problem1">I get headaches</label>
</div>
<div class="radiowrapper" id="wrap2">
    <input type="radio" name="problem" value="teeth" id="problem2">
    <label for="problem2">I grind my teeth</label>
</div>
<div class="radiowrapper" id="wrap3">
    <input type="radio" name="problem" value="heartburn" id="problem3">
    <label for="problem3">I experience heart burn</label>
</div>

还有css：

.radiowrapper position:absolute;

.radiowrapper input visibility:hidden; width:0;

.radiowrapper label:hover font-weight:bold

.radiowrapper input:checked + label font-weight:bold; text-transform:uppercase

#wrap1 left:100px; top:50px;

#wrap2 left:80px; top:100px;

#wrap3 left:0px; top:150px;

见jsFiddle。

【讨论】：

非常感谢您的帮助，非常感谢