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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个单选按钮列表。从取消选中的单选按钮删除班级名称

<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语句中设置另一个循环，并为所有未经检查的收音机循环并删除该类？

回答：

下面的评论中提到的信息[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;  
     }  
    })  
}

html lang-html prettyprint-override"><input type="radio" name="capital" value="bratislava">bratislava  
<input type="radio" name="capital" value="kiev">kiev  
<input type="radio" name="capital" value="prague">prague

回答：

呀添加第二循环将解决您的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">

以上是 从取消选中的单选按钮删除班级名称 的全部内容， 来源链接： utcz.com/qa/265567.html

回到顶部