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属性，除非< / em>它包含在一个元素中，对于你想要影响的每个文本字符串，它必须是一个单独的元素：

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

顺便说一句，要使用纯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 Fiddle demo

Answer 2

您的退货声明注意：

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

另请注意，您尝试为无线电输入提供红色，但无法以这种方式设置样式。输入旁边的文本不是输入本身的一部分。

这是一个简化的脚本，可以获取输入值onchange（而不是onselect）。您应该可以将此作为更好的起点：http://jsfiddle.net/rWp6E/

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

 for (var i = 0; i < radios.length; i++) {
     radios[i].onchange = function () {
         alert(this.value);
     }
 }

Answer 3

getElementByName无效Javascript。更好的方法是使用onCheckedChanged事件来改变你的风格：

<input id="case1" type="radio" name="cases" oncheckedchanged="highlight(this)" value="500.00"/>

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

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

CSS3中还有一个:checked选择器（与上面提到的其他人一样），但它不适用于某些旧版浏览器，即IE8及更早版本。

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

3 个答案: