我有一个订单表格,有三组单选按钮选项.最后,我希望每个组中单选按钮的文本在单击时更改为粗体和红色.但是,即使只改变一组的颜色,我也没有运气.下面是我用来尝试更改一组单选按钮的循环.我的逻辑是通过单选按钮组,如果其中一个被点击它将改变文本的样式.这个功能我做错了什么?
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'; } } }
这是我的代码中的一组单选按钮.其他两组相似:
Desktop Case ($500.00) Mini-Tower Case ($600.00) Full-Tower Case ($700.00)
任何帮助将不胜感激.
如果你修改你的代码,并将文本包装在一个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小提琴演示.