如何在单击时使用javascript更改单选按钮的样式

我有一张有三套单选按钮选项的订单。最后，我希望每个组中单选按钮的文本在单击时变为粗体和红色。然而，仅仅改变一组的颜色，我一点运气都没有。下面是我用来尝试更改一组单选按钮的循环。我的逻辑是浏览这组单选按钮，如果单击其中一个按钮，就会改变文本的样式。这个函数有什么问题

 function highlight() {

     var radios = document.getElementsByName('cases');

     for (var i = 0; i < radios.length; i++) {
         if (radios[i].checked == true) {
             return document.getElementByName.style.color = 'red';
         }
     }

 }  

函数高亮显示（）{
var radios=document.getElementsByName（'cases'）；
对于（变量i=0；i

这是我代码中的一组单选按钮。其他两组类似：

 <input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/> Desktop Case ($500.00) </br>

 <input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/> Mini-Tower Case ($600.00) </br>

 <input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> Full-Tower Case ($700.00) </br>

桌面机箱（$500.00）

迷你塔式机箱（600.00美元）

全塔箱（700.00美元）

---

任何帮助都将不胜感激。

您的回信声明如下：

return document.getElementByName.style.color = 'red';

还请注意，您曾尝试将收音机输入设置为红色，但它们不能以这种方式设置样式。输入旁边的文本不是输入本身的一部分

这里有一个简化的脚本，可以在更改时（而不是在选择时）获取输入值。您应该能够将此作为更好的起点：

var radios=document.getElementsByName（'cases'）；
对于（变量i=0；i

如果您修改代码，并将文本包装在

标签

元素中，顺便说一句，您不能更改文本的

颜色

或

字体重量

属性，除非它包装在元素中，并且对于要影响的每个文本字符串，必须是单独的元素：

<input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/><label for="case1">Desktop Case ($500.00)</label>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/><label for="case2">Mini-Tower Case ($600.00)</label>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> <label for="case3">Full-Tower Case ($700.00)</label>

顺便说一句，要使用纯JavaScript，我建议：

function choiceHighlight(radio){
    var groupName = radio.name,
        group = document.getElementsByName(groupName);
    for (var i = 0, len = group.length; i < len; i++){
        group[i].nextSibling.className = group[i].checked ? 'chosen' : 'unchosen';
    }
}

var radios = document.getElementsByName('cases');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', function(){
        choiceHighlight(this);
    });
}

功能选项突出显示（收音机）{
var groupName=radio.name，
group=document.getElementsByName（groupName）；
对于（变量i=0，len=group.length；i

---

.

getElementByName

不是有效的Javascript。更好的方法是使用onCheckedChanged事件更改样式：

功能突出显示（e）{
如果（e.checked==true）
{e.style.color=“red”}
其他的
{e.style.color=“其他颜色”}
}

请注意，如果要更改文本的颜色，实际上必须更改标签的样式

---

CSS3中还有一个

：选中的

选择器（正如上面提到的其他人），但是它在一些较旧的浏览器中不起作用，即IE8和更早的浏览器。

jQuery。需要我再说一遍吗？@TJonS您想包含一个完整的库来更改某些文本的颜色吗？您可以通过CSS来实现。你会在这本书中找到一个例子

input[type=radio]:checked + label {
    color: red;
    font-weight: bold;
}

function choiceHighlight(radio){
    var groupName = radio.name,
        group = document.getElementsByName(groupName);
    for (var i = 0, len = group.length; i < len; i++){
        group[i].nextSibling.className = group[i].checked ? 'chosen' : 'unchosen';
    }
}

var radios = document.getElementsByName('cases');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', function(){
        choiceHighlight(this);
    });
}

<script type="text/javascript">
function highlight(e) {
   if(e.checked == true)
      {e.style.color = "red"}
   else
      {e.style.color = "some other color"}
}