javascript 单击时如何使用javascript更改单选按钮的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20354920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the style of a radio button with javascript when clicked
提问by user3061900
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 (0.00) </br>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/> Mini-Tower Case (0.00) </br>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> Full-Tower Case (0.00) </br>
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by David says reinstate Monica
If you amend your code, and wrap the text in a labelelement and, incidentally, you can't change the coloror font-weightproperties of text unlessit's wrapped in an element, and that would have to be a separate element for each string of text you want to affect :
如果您修改代码，并将文本包装在一个label元素中，顺便说一句，除非将文本包装在一个元素中，否则您无法更改文本的color或font-weight属性，并且对于您想要的每个文本字符串，这必须是一个单独的元素影响 ：
<input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/><label for="case1">Desktop Case (0.00)</label>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/><label for="case2">Mini-Tower Case (0.00)</label>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> <label for="case3">Full-Tower Case (0.00)</label>
You can achieve this with just CSS:
您可以仅使用 CSS 来实现这一点：
input[type=radio]:checked + label {
color: red;
font-weight: bold;
}
Incidentally, to use plain JavaScript I'd suggest:
顺便说一句，要使用纯 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);
});
}
回答by Stuart Kershaw
Your return statement looks off:
您的退货声明看起来不正常：
return document.getElementByName.style.color = 'red';
Also note that you've attempted to give the radio inputs a color of red, but they cannot be styled in this way. The text that you have next to the inputs is not part of the input itself.
另请注意，您已尝试将无线电输入设置为红色，但不能以这种方式设置样式。输入旁边的文本不是输入本身的一部分。
Here's a simplified script that gets you the input values onchange (not onselect). You should be able to use this as a better starting point: http://jsfiddle.net/rWp6E/
这是一个简化的脚本，可让您获取 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);
}
}
回答by ElGavilan
getElementByNameisn't valid Javascript. A better way to do this would be to use the onCheckedChanged event to change your style:
getElementByName不是有效的 Javascript。一个更好的方法是使用 onCheckedChanged 事件来改变你的风格：
<input id="case1" type="radio" name="cases" oncheckedchanged="highlight(this)" value="500.00"/>
<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"}
}
Note that you will actually have to change the style of the label if you want to change the color of the text.
请注意，如果您想更改文本的颜色，您实际上必须更改标签的样式。
There is also a :checkedselector in CSS3 (as someone else mentioned above), however it will not work in some older browsers, namely IE8 and earlier.
:checkedCSS3 中也有一个选择器（正如上面提到的其他人），但它在一些较旧的浏览器中不起作用，即 IE8 及更早版本。
