清除div中任何输入值的简单方法？

Question

有没有一种简单的方法来迭代元素中的子元素,比如说div,如果它们是任何类型的输入(无线电,选择,文本,隐藏......)清除它们的值？

编辑以添加示例解决方案代码的链接. 非常感谢Guffa和其他受访者!我从中学到了!

Answer 1

我想你想清除所有孩子,不仅仅是直接的孩子,所以它必须是递归的.由于不同的输入元素被不同地清除,您必须检查它们的类型,以便您知道如何处理它们.我想你也要清除textareas,但保持按钮不变:

function clearChildren(element) {
   for (var i = 0; i < element.childNodes.length; i++) {
      var e = element.childNodes[i];
      if (e.tagName) switch (e.tagName.toLowerCase()) {
         case 'input':
            switch (e.type) {
               case "radio":
               case "checkbox": e.checked = false; break;
               case "button":
               case "submit":
               case "image": break;
               default: e.value = ''; break;
            }
            break;
         case 'select': e.selectedIndex = 0; break;
         case 'textarea': e.innerHTML = ''; break;
         default: clearChildren(e);
      }
   }
}

通过对元素的引用来调用它:

clearChildren(document.getElementById('IdOfTheDiv'));

编辑:
忘记选择...

编辑2:
一些更正:childNodes.length,处理没有tagName的元素和大写的tagName值.

Answer 2

使用JQuery非常简单:

$('#myDiv').children().find('input,select').each(function(){
   $(this).val('');
});

我们可以在"查找"调用中添加尽可能多的标记.

Answer 3

哦,男孩,这将是一个jQuery的一个班轮:

$(':input:not(:button)', div).val([])

如果没有jQuery,您必须考虑<select>字段,文本字段,密码字段和广播/复选框字段:

function clearFields(container) {
    var selects = container.getElementsByTagName('select');

    for(var i=0, len=selects.length; i < len; i++) {
        selects[i].selectedIndex = -1;
    }

    var fields = container.getElementsByTagName('input');
    for(var i=0, len=fields.length; i < len; i++) {
        var field = fields[i];
        switch(field.type)
        {
            case 'radio':
            case 'checkbox':
                field.checked = false;
                break;

            case 'text':
            case 'password':
            case 'hidden':
                field.value = ''
        }
    }

    var fields = container.getElementsByTagName('textarea');
    for(var i=0, len=fields.length; i < len; i++) {
        fields[i].value = ''
    }
}

Answer 4

卡里姆的答案很有效.使用jQuery,我相信它会是这样的:

$("#myDiv").each(function(){
   if($(this).type == "input")
      $(this).val('');
});

实际上,想想看,你也可以尝试:

$("#myDiv input").val('');//myDiv is your Div name