Wählen Sie den gleichen Namen Radio-Buttons in Javascript

Question

Ich muss 2 Radio-Eingänge in eine Variable in JavaScript hinzufügen. Der folgende Code erkennt nur den ersten Eingang, der document.forms["myForm"]["satisfied"][0] ist. onclick sollte durch Auswahl von Radioknöpfen ausgelöst werden. Ich könnte den Code in 2 Variablen und 2 onclick Ereignisse kopieren, aber das wäre nicht ideal. Irgendwelche Ideen werden geschätzt!

Bitte beachten Sie, dass ich in meinem Fall getElemntbyId oder getElementbyTagName nicht verwenden kann aufgrund der Beschränkung des Zugriffs auf das HTML in meinem Projekt, so dass ich nur durch name Tag auslösen kann.

var inputs = document.forms["myForm"]["satisfied"][0] || document.forms["myForm"]["satisfied"][1]; 

inputs.onclick = function() { 
    document.forms["myForm"]["check"].disabled= false; 
} 

Answer 1

Verwendung document.querySelectorAll() mit attribute-value selector Elemente auszuwählen.

var radios = document.querySelectorAll('input[name="satisfied]'); 

// Iterate over them and bind event 
for (var i = 0, len = radios.length; i < len; i++) { 
    radios[i].addEventListener('change', function() { 
     document.querySelector('input[name="check"]').disabled = false; 
    }, false); 
} 

Demo

Answer 2

Ich würde vorschlagen:

// retrieving all elements with the name of 'satisfied': 
var inputs = document.getElementsByName('satisfied'); 

// defining a function so that multiple elements can 
// be assigned the same function: 
function enable() { 

    // iterating over the inputs collection: 
    for (var i = 0, len = inputs.length; i<len; i++) { 
     // updating the 'disabled' property to false, 
     // thus enabling the inputs: 
     inputs[i].disabled = false; 
    } 
} 

// iterating over the inputs collection: 
for (var i = 0, len = inputs.length; i<len; i++) { 
    // binding the enable() function as the 
    // event-handler for the click event: 
    inputs[i].addEventListener('click', enable); 
} 

Die erste Option, oben, ziemlich primitiv ist; aktualisiert für zeitgenössische Browser ist folgendes möglich:

function enable() { 
    // using Array.from() to convert the collection returned by 
    // document.getElementsByName() into an array; over which we 
    // iterate using Array.prototype.forEach(). 

    // 'this' is supplied from EventTarget.addEventListener(); 
    // and allows us to retrieve the name, and the associated 
    // 'group' of elements for the specific input; meaning this 
    // same function can be bound to multiple 'groups' of elements 
    // without interfering with the other 'groups': 
    Array.from(document.getElementsByName(this.name).forEach(function (el) { 
     // el: the current element in the Array over which 
     // we're iterating. 

     // updating the 'disabled' property to false: 
     el.disabled = false; 
    }); 
} 

// as above, except we supply the 'name' explicitly: 
Array.from(document.getElementsByName('satisfied')).forEach(function (el) { 
    // binding the enable() function as the event-handler 
    // for the click event: 
    el.addEventListener('click', enable); 
});