Question

是否有一种简单的方法来迭代元素中的子元素，例如div，如果它们是任何类型的输入（radio，select，text，hidden ...）clear他们的价值？

修改以添加指向example solution code.的链接非常感谢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

Answer 5

Kudos，Haresh！添加小部分以取消选中复选框。（使用true检查所有。）

$('#myDiv').children().find('input,select').each(function(){

$(this).val('');
$(this).attr('checked',false);

});

Answer 6

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

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

Answer 7

这是旧帖子，但有人可以看到。

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

当然，您可以添加更多元素来保留它

Answer 8

$('#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);

用于jquery。

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

8 个答案: