Question

我在这里遇到一种非常奇怪的情况。我们说我有一个带有三个输入元素 radio 的表单，就像这样

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

我想这一行

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

会返回广播类型，而不是未定义。虽然，这一个

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

返回广播类型，当然这不是我想要的。你可能会看到巫术here。

有谁知道发生了什么？

第一次更新

如果我们处理复选框，也会发生同样的事情，这意味着如果不指定索引，就无法确定无线电阵列或复选框按钮上的元素类型。

换句话说，这个片段

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;
    }
}

不会像人们期望的那样表现出色。所以，我想，循环遍历表单元素是唯一的解决方案。好吧，它不是 - 检查第二次更新。

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;
    }
}

这是fiddle。

第二次更新

与此同时，我找到了一种非常简单的方法来访问和查询循环遍历fields对象的表单元素（在我的情况下），而不是循环遍历所有元素。

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

如果你添加这一行，可以看到秘密：

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

你会看到它创建了一个RadioNodeList，这是一个类似数组的结构。

由于所有相关的单选按钮具有相同的名称，但它们是不同的元素，因此您必须以这种方式访问它们以设置状态。

如果你真的必须访问它们而不使用数组语法[0]，你可以给每个单选按钮一个唯一的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>

为什么在radio或checkbox按钮数组上的element.type返回＆＃34; undefined＆＃34;

1 个答案: