为什么单选按钮或复选框按钮数组上的element.type返回“ undefined”

Question

I'm facing a very strange situation here. Let's say I have a form with three input elements of type radio , just like this

<form>
    <input type="text" name="donor" value="" />Heart
    <input type="radio" name="organ" value="10" />Heart
    <input type="radio" name="organ" value="20" checked="checked" />Lungs
    <input type="radio" name="organ" value="30" />Kidney    
</form>

and I thought this line

alert("input type: " + document.forms[0].organ.type);

would return type radio instead of undefined . Though, this one

alert("input type: " + document.forms[0].organ[0].type);  

returns type radio and of course it's not what I want. You may see the sorcery here .

Does anyone know what's going on?

1st UPDATE

The same thing will occur if we deal with checkboxes, which means that element type on an array of radios or checkboxes buttons cannot be determined without specifying an index.

In other words, this snippet

var i, form = document.forms[0], fields = ['donor', 'organ'];

for(i = 0; i < fields.length; i++) {
    switch(form[fields[i]].type) {
        case 'radio':
            alert('(a) - I can beat up Chuck Norris');
            // anyway, no one hears this :)
            break;
        case 'checkbox':
            break;
        case 'text':
            alert('(a) - Chuck Norris is unbeatable');
            break;
    }
}

won't behave as one may expect. So, I guess, looping through the form elements is the only solution left. Well, it's not - check the 2nd update.

for(i = 0; i < form.elements.length; i++) {
    switch(form.elements[i].type) {
        case 'radio': 
            alert('(b) - Nobody can beat up Chuck Norris');
            // now, check if this element is in fields[] 
            // and do something  
            break;
        case 'checkbox':
            break;
        case 'text':
            alert('(b) - Chuck Norris is unbeatable');
            break;
    }
}

Here is the fiddle .

2nd UPDATE

In a meantime I found a pretty simple way to access and query form elements looping through fields object (in my case) and not looping through all elements.

var form = document.forms[0], fields = ['donor', 'organ'];

for (var key in fields) {
    switch(form[key].type){
        case 'select-one':
            break;
        case 'select-multiple':
            break;
        case 'checkbox': // we are dealing with a single checbox button 
            break;
        case 'text': case 'textarea': case 'hidden': case 'password':
            break;
        default:
            if(form[key][0].type == radio' || form[key][0].type == radio' == 'checkbox') {
                // we're dealing with an array of radio or checkbox buttons, otherwise
            }else{
                console.log("Something went wrong!");
            }
            break;
    }
}

Answer 1

The secret can be seen if you add this line:

alert(document.forms[0].organ.toString());

and you'll see that it creates a RadioNodeList , which is an array-like structure.

Because all related radio buttons have the same name, yet are different elements, you have to access them in this way to set the status.

If you truly MUST access them without using array syntax [0] , you could give each radio button a unique ID:

<form>
    <input type="radio" id="radio_1" name="organ" value="10" />Heart
    <input type="radio" id="radio_2" name="organ" value="20" checked="checked" />Lungs
    <input type="radio" id="radio_2" name="organ" value="30" />Kidney
</form>

<script>
    alert("input type: " + document.forms[0].organ[0].type);

    alert(document.forms[0].organ.toString());

    alert("input type: " + document.getElementById("radio_1").type);
</script>