CODEWITHSUNDEEP
javascript
Dominik Krulak
Dominik Krulak

Reputation: 611

Remove class name from deselected radio button

I have a list of radio buttons.

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

On radio button event listener type change I add some class name like this.

// 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 , '' );
        }

    })

}

This works well on checkboxes elements but not on radio buttons group. The goal is in the title in this question.

To solve it I assume I should set another loop within if statement and loop for all unchecked radios and remove the class?

Upvotes: 0

Views: 613

Answers (2)

gvmani
gvmani

Reputation: 1600

following the post [OnChange event handler for radio button (INPUT type="radio") doesn't work as one value mentioned in the comments, you can do it without looping through the inputs.

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

Upvotes: 1

boulaffasamine
boulaffasamine

Reputation: 21

Yeah adding second loop will solve your 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">

Upvotes: 1

Related Questions