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

Question

我有一个订单表格,有三组单选按钮选项.最后,我希望每个组中单选按钮的文本在单击时更改为粗体和红色.但是,即使只改变一组的颜色,我也没有运气.下面是我用来尝试更改一组单选按钮的循环.我的逻辑是通过单选按钮组,如果其中一个被点击它将改变文本的样式.这个功能我做错了什么？

 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';
         }
     }

 }  

这是我的代码中的一组单选按钮.其他两组相似:

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

任何帮助将不胜感激.

Answer 1

如果你修改你的代码,并将文本包装在一个label元素中,顺便说一下,你不能改变文本color或font-weight属性,除非它被包装在一个元素中,并且它必须是你想要的每个文本字符串的单独元素影响 :

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

你可以用CSS实现这个目的:

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

JS小提琴演示.

顺便说一下,要使用纯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);
    });
}

JS小提琴演示.