从取消选择的单选按钮中删除类名

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

按照 cmets 中提到的帖子 [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

是的，添加 第二个循环 将解决您的问题

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