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

有没有一种简单的方法可以迭代元素中的子元素，比如div，如果它们是任何类型的输入（单选、select、text、hidden…），请清除它们的值

---

编辑添加链接，感谢Guffa和其他受访者！我从中吸取了教训

卡里姆的答案很有效。使用jQuery，我相信它会像这样运行：

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

实际上，想想看，你也可以试试：

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

---

我想您希望清除所有子项，而不仅仅是直接子项，因此它必须是递归的。由于不同的输入元素清除方式不同，因此必须检查它们的类型，以便知道如何处理它们。我想您也希望清除文本区域，但保持按钮不变：

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

编辑：
忘记了选择

编辑2:

---

一些更正：childNodes.length，处理没有标记名和大写标记名值的元素。

哦，伙计，这将是一个带有jQuery的单行程序：

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

没有jQuery，您必须考虑

字段、文本字段、密码字段和无线电/复选框字段：

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 = ''
    }
}

函数clearFields（容器）{
var selects=container.getElementsByTagName（'select'）；
for（变量i=0，len=selects.length；i

使用JQuery非常简单：

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

---

我们可以在“查找”通话中放入任意多个标签。

太好了，Haresh！不选中复选框的小添加。（使用true可选中所有。）

---

对于jquery

使用以下代码清除所有类型的输入表单元素值

function clear_form_elements(id_name) {
  jQuery("#"+id_name).find(':input').each(function() {
    switch(this.type) {
        case 'password':
        case 'text':
        case 'textarea':
        case 'file':
        case 'select-one':       
            jQuery(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    }
  });
}

---

这是一篇旧文章，但有人能看到

function clearFields(divElement) {
    var ancestor = document.getElementById(divElement),
    descendents = ancestor.getElementsByTagName('*');

    var i, e, d;
    for (i = 0; i < descendents.length; ++i) {
        if (descendents[i].tagName.toLowerCase() == 'input'){
            switch (descendents[i].type){
                case 'text':
                case 'password':
                case 'color':
                case 'date':
                case 'email':
                case 'month':
                case 'number':
                case 'range':
                case 'search':
                case 'tel':
                case 'time':
                case 'url':
                case 'week':
                    descendents[i].value = '';
                    break;

                case 'radio':
                case 'checkbox':
                    descendents[i].checked = false;
            }
        }
        else if (descendents[i].tagName.toLowerCase() == 'select'){
            descendents[i].selectedIndex = 0;
        }
    }   
}

---

当然，您可以添加更多元素来休息它

这是一个很好的假设，需要它来处理子代，但是您不需要递归来获取子代节点。谢谢您的回复！！我试图实现这一点，并有一个奇怪的症状。对简单的测试表单没有明显的影响。如果我得到打印元素的警报，我会得到[object HtmlDevice]（好..）如果我得到打印元素.childNodes的警报（），它会有[object nodeLIst]（再次好），但是如果我得到警报（），在for（）中回显I的值，它就不会激发，所以它似乎不会在节点上迭代？代码类似于：函数clearChildren（element）{for（var i=0；i$('#div_id input[type=textbox], #div_id select, #div_id textarea').val(''); $('#div_id input[type=radio], #div_id input[type=checkbox]').prop('checked', false);

function clear_form_elements(id_name) {
  jQuery("#"+id_name).find(':input').each(function() {
    switch(this.type) {
        case 'password':
        case 'text':
        case 'textarea':
        case 'file':
        case 'select-one':       
            jQuery(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    }
  });
}

function clearFields(divElement) {
    var ancestor = document.getElementById(divElement),
    descendents = ancestor.getElementsByTagName('*');

    var i, e, d;
    for (i = 0; i < descendents.length; ++i) {
        if (descendents[i].tagName.toLowerCase() == 'input'){
            switch (descendents[i].type){
                case 'text':
                case 'password':
                case 'color':
                case 'date':
                case 'email':
                case 'month':
                case 'number':
                case 'range':
                case 'search':
                case 'tel':
                case 'time':
                case 'url':
                case 'week':
                    descendents[i].value = '';
                    break;

                case 'radio':
                case 'checkbox':
                    descendents[i].checked = false;
            }
        }
        else if (descendents[i].tagName.toLowerCase() == 'select'){
            descendents[i].selectedIndex = 0;
        }
    }   
}

clearFields ('divName');