Простой способ очистить значение любого ввода внутри div?

Question

Есть ли простой способ перебирать дочерние элементы в элементе, скажем, div, и если они любой , то вид ввода (radio, select, text, hidden ...) очищает их значение?

Редактировать , чтобы добавить ссылку на пример кода решения. Большое спасибо Guffa и другим респондентам! Я учился на этом!

Answer 1

Я полагаю, что вы хотите очистить всех детей, а не только прямых детей, поэтому это должно быть рекурсивным. Поскольку разные элементы ввода очищаются по-разному, вы должны проверить их тип, чтобы вы знали, что с ними делать. Я полагаю, что вы также хотите очистить текстовые области, но оставьте кнопки без изменений:

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

Edit:
Забыли выбор ...

Редактировать 2:
Некоторые исправления: childNodes.length, обработка элементов без значений tagName и прописных значений tagName.

Answer 2

Очень просто с JQuery:

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

Мы можем поставить столько тегов в вызове "find".

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

Слава, Хареш! Небольшое дополнение, чтобы снять флажки. (Используйте true, чтобы проверить все.)

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

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

});

Answer 6

Это старый пост, но кто-то может его увидеть.

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 7

Используйте следующий код для очистки всех типов значений элементов формы ввода

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