從取消選中的單選按鈕刪除班級名稱

Question

我有一個單選按鈕列表。

<input type="radio" name="capital" value="bratislava"> 
<input type="radio" name="capital" value="kiev"> 
<input type="radio" name="capital" value="prague"> 

單選按鈕事件監聽器類型change我添加一些class名這樣的。

// Scope toggles 
var toggles = document.querySelectorAll('input[type=radio]'); 

// Accesses the toggles length property outside the loop and make the loop run faster 
var tL = toggles.length; 

// Loop-in for `toggles` length HTML collection 
for (var i = 0; i < tL; i++) { 

    // Store array-like objects in this variable 
    var currentToggle = toggles[i]; 

    // Run event listener method on `change` and refer to element using `this` keyword 
    currentToggle.addEventListener('change', function() { 

     // + ADD CLASS NAME 
     // Check if element is checked and if className isn't present 
     if (this.checked && !this.className.match(/(?:^|\s)class(?!\S)/)) { 
      // Add class name without removing/affecting existing values 
      this.className += " class"; 
     } 

     // - REMOVE CLASS NAME 
     else { 
      // Replace class with empty string 
      this.className = this.className.replace(/(?:^|\s)class(?!\S)/g , ''); 
     } 

    }) 

} 

這適用於複選框元素，但不適用於單選按鈕組。 目標是在這個問題的標題。

爲了解決它，我假設我應該在if語句中設置另一個循環，併爲所有未經檢查的收音機循環並刪除該類？

Answer 1

下面的評論中提到的信息[OnChange event handler for radio button (INPUT type="radio") doesn't work as one value，你可以不用通過輸入循環。

// Scope toggles 
 
var toggles = document.querySelectorAll('input[type=radio]'); 
 

 
// Accesses the toggles length property outside the loop and make the loop run faster 
 
var tL = toggles.length; 
 
var last = undefined; 
 
// Loop-in for `toggles` length HTML collection 
 
for (var i = 0; i < tL; i++) { 
 

 
    // Store array-like objects in this variable 
 
    var currentToggle = toggles[i]; 
 

 
    // Run event listener method on `change` and refer to element using `this` keyword 
 
    currentToggle.addEventListener('change', function() { 
 
    
 
     // + ADD CLASS NAME to current 
 
     // Check if element is checked and if className isn't present 
 
     if (this.checked && !this.className.match(/(?:^|\s)class(?!\S)/)) { 
 
      // Add class name without removing/affecting existing values 
 
      this.className += " class"; 
 
     } 
 

 
if(last === undefined){ 
 
    last = this; 
 
    return; 
 
} 
 
     // - REMOVE CLASS NAME 
 
     else { 
 
      // Replace class with empty string 
 
      last.className = last.className.replace(/(?:^|\s)class(?!\S)/g , ''); 
 
last = this; 
 
     } 
 

 
    }) 
 

 
}

<input type="radio" name="capital" value="bratislava">bratislava 
 
<input type="radio" name="capital" value="kiev">kiev 
 
<input type="radio" name="capital" value="prague">prague

Answer 2

呀添加第二循環將解決您的probleme

var varName = document.querySelectorAll('input[type="radio"]'); 
 
for (var i = 0; i < varName.length; i++) varName[i].onchange = functionName; 
 

 
function functionName() { 
 
    for (var i = 0; i < varName.length; i++) { 
 
    if (varName[i] == this) varName[i].classList.add('selected'); 
 
    else varName[i].classList.remove('selected'); 
 
    } 
 
}

.selected { 
 
    background-color: green; 
 
}

<input type="radio" name="capital" value="bratislava"> 
 
<input type="radio" name="capital" value="kiev"> 
 
<input type="radio" name="capital" value="prague">