从取消选中的单选按钮删除班级名称

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">