單擊時如何使用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小提琴演示 。

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和更早版本）中無法使用。