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

Question

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

Answer 1

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

<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 .