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。（compatibility reference）

Answer 3

我会做这样的事情：

<label><input type="radio" name="myRadio" value="1" /> One</label>
<label><input type="radio" name="myRadio" value="2" /> Two</label>
<label><input type="radio" name="myRadio" value="3" /> Three</label>

在每个元素上使用onchange处理程序来更改父标签的CSS类。在jQuery中它看起来像这样：

$(':radio').change(function() {           // get all the radio buttons and
                                          // add an onchange handler
    var $label = $(this).parent('label'); // get a reference to the parent label
    if (this.checked) {                   // if the radio is on...
        $label.addClass('selected');      // add the CSS class "selected" to the label
    } else {                              // otherwise...
        $label.removeClass('selected');   // take the class away.
    }
});

请记住覆盖标签的默认样式（粗体）：

label {
    font-weight: normal;
}
label.selected {
    font-weight: bold;
}

Answer 4

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

Answer 5

<input type=button onClick="this.style.fontWeight=bold">

这可能有效，我没有自己测试。当然有更好的解决方案。

如果您的代码中插入了JavaScript框架（例如 jQuery ），则可能有许多功能可用于执行相同操作。选择器，样式器，css处理程序等等。

我宁愿建议像这样创建一个CSS类：

.felkover
{
    font-weight: bold;
}

然后只需在任何给定按钮的类属性中添加或删除此定义。

Answer 6

以下是一个例子：

<script>
  function makeBold()
  {
    var radios = document.getElementsByName("sex");
    for (var index = 0; index < radios.length; index++)
    {
      if (radios[index].checked)
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight='bold';
      }
      else
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight='normal';
      }
    }
  }
</script>

<input type="radio" name="sex" value="male" onclick="makeBold();"> 
<span id="span_male">Male</span>

<br>
<input type="radio" name="sex" value="female" onclick="makeBold()"> 
<span id="span_female">Female</span>

编辑：您应该使用以下ID来定义文本范围： span _

Answer 7

有趣的按钮周围有标签以包含文字，我会将其添加到标签中。

<label onchange="this.parent.children.fontWeight='normal';this.fontWeight='bold';">

虽然理想情况下我不会将此代码内联，但在页面加载后从头部的某处将它挂钩。

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

7 个答案: