如何在选择时将HTML单选按钮加粗？

Question

在HTML中,我有以下单选按钮选项

o选择1
o选择2
o选择3

我想做的是当有人从上面选择一个单选按钮时,与所选单选按钮对应的文本变为粗体.

因此,例如 - 如果此人选择"选择2",单选按钮选择现在看起来像:

o选择1
o选择2
o选择3

我该怎么做呢？我假设必须使用JavaScript或CSS.

提前致谢

更新:如何在不使用jQuery的情况下实现"nickf"解决方案？

Answer 1

您可以使用CSS完全执行此操作,但您需要将每个输入的文本包装在span或其他标记中:

<input type="radio" name="group1" value="Milk"><span>Milk</span><br>

然后只使用兄弟选择器:

input[type="radio"]:checked+span { font-weight: bold; }

Answer 2

您可以尝试使用CSS完成所有操作.

我尝试了这个,它的工作原理¹:

<input type="radio" name="choice" value="1" checked /><span>First choice</span>
<input type="radio" name="choice" value="2" /><span>Second choice</span>

input[type="radio"]:checked + span
{
    font-weight: bold;
}

说明:这将捕获无线电输入(type ="radio")后的所有跨度并进行检查.

¹我使用Firefox 3和IE7进行了测试,它只适用于Firefox.(兼容性参考)

Answer 3

使用您的 OnChange 事件select将所选元素的 css 样式更改为粗体。