单击时如何使用javascript更改单选按钮的样式 [英] How to change the style of a radio button with javascript when clicked

问题描述

我有一个包含三组单选按钮选项的订单.最终，我希望每个组中的单选按钮的文本在单击时变为粗体和红色.但是，即使只是改变一组的颜色，我也没有任何运气.下面是我用来尝试更改一组单选按钮的循环.我的逻辑是遍历一组单选按钮，如果单击其中一个按钮，它将改变文本的样式.这个功能我做错了什么?

I have an order form that has three sets of radio button options. Ultimately, I would like to have the text of the radio button in each group change to bold and red when it is clicked. However, I'm not having any luck just changing the color of even one group. Below is the loop I was using to try to change one group of radio buttons. My logic was to go through the group of radio buttons and if one of them were clicked it would change the style of the text. What am I doing wrong with this function?

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

 }  

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

This is one group of radio buttons in my code. The other two groups are similar:

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

任何帮助将不胜感激.

推荐答案

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

If you amend your code, and wrap the text in a label element and, incidentally, you can't change the color or font-weight properties of text unless it's wrapped in an element, and that would have to be a separate element for each string of text you want to affect :

<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 来实现:

You can achieve this with just CSS:

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

JS Fiddle 演示.

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

Incidentally, to use plain JavaScript I'd suggest:

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 Fiddle 演示.

这篇关于单击时如何使用javascript更改单选按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！