将文本作为单选按钮使用 / 将字符串转换为单选按钮

Question

我希望将文本作为HTML中的单选按钮，这样在多个选项中点击一个选项（文本）时，它会被突出显示（选中）并将值传递到后续内容。

- Faisal

---

可能是 http://stackoverflow.com/questions/13061380/html-replacing-radio-button-text 的重复问题。 - Nitesh

你想让一个文本块（比如一个span）像单选按钮一样工作吗？你所描述的听起来很像带有“size”属性的“select”，你知道吗？而且我不明白你所说的“向前传递值”的意思。无论如何，你尝试过什么？ - Mr Lister

是的，你说得对，我只是想让一个文本区域像单选按钮一样工作，并且通过携带值来实现。也就是说，当我点击（选择）一个单选按钮时，它应该像实际选中的单选按钮在提交时传递其值一样，以文本形式呈现。 - Faisal

仍然听起来像是带有size属性的select... - Mr Lister

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

那应该是问题的一部分，这会让我们更容易找出你确切需要什么。 - Mr Lister

Answer 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。

- Mr Lister