मेरे पास रेडियो बटन की एक सूची है।

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

    })

}

यह चेकबॉक्स तत्वों पर अच्छा काम करता है लेकिन रेडियो बटन समूह पर नहीं। लक्ष्य इस प्रश्न में शीर्षक में है।

इसे हल करने के लिए मुझे लगता है कि मुझे सभी अनचेक रेडियो के लिए कथन और लूप के भीतर एक और लूप सेट करना चाहिए और कक्षा को हटा देना चाहिए?

0
Dominik Krulak 27 पद 2017, 17:07

2 जवाब

सबसे बढ़िया उत्तर

पोस्ट के बाद [OnChange रेडियो बटन के लिए ईवेंट हैंडलर (INPUT प्रकार = "रेडियो") टिप्पणियों में उल्लिखित एक मान के रूप में काम नहीं करता है, आप इसे इनपुट के माध्यम से लूप किए बिना कर सकते हैं।

// 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
1
gvmani 28 पद 2017, 06:51

हाँ दूसरा लूप जोड़ने से आपकी समस्या का समाधान हो जाएगा

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">
1
boulaffasamine 27 पद 2017, 17:43