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

Есть ли простой способ перебора дочерних элементов в элементе, например div, и если они представляют собой какой-либо вход (радио, выбор, текст, скрытый...), снимите их значение?

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

Ответы

Ответ 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 и значений тега верхнего регистра.

Ответ 2

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

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

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

Ответ 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 = ''
    }
}

Ответ 4

Ответ Карим работает хорошо. Используя jQuery, я считаю, что это будет выглядеть примерно так:

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

Собственно, подумайте об этом, вы также можете попробовать:

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

Ответ 5

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

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

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

});

Ответ 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;
    }
  });
}

Ответ 7

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