为什么不使用document.getElementById("myId").reset();？ 这是简单而漂亮的

经过测试和验证的代码:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript必须包含在$(document)中。准备好了，而且必须符合你的逻辑。

为什么需要用JavaScript来完成呢?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

先尝试一下，它不会清除具有默认值的字段。

下面是一种用jQuery实现的方法:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

$('form[name="myform"]')[0].reset();

我写了一个通用的jQuery插件:

/** * Resets any input field or form */ $.fn.uReset = function () { return this.filter('form, :input').each(function () { var input = $(this); // Reset the form. if (input.is('form')) { input[0].reset(); return; } // Reset any form field. if (input.is(':radio, :checkbox')) { input.prop('checked', this.defaultChecked); } else if (input.is('select')) { input.find('option').each(function () { $(this).prop('selected', this.defaultSelected); }); } else if (this.defaultValue) { input.val(this.defaultValue); } else { console.log('Cannot reset to default value'); } }); }; $(function () { // Test jQuery plugin. $('button').click(function (e) { e.preventDefault(); var button = $(this), inputType = button.val(), form = button.closest('form'); if (inputType === 'form') { form.uReset() } else { $('input[type=' + inputType + '], ' + inputType, form).uReset(); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h3>Form</h3> <form> <input type="text" value="default"/><br /><br /> Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br /> Ch 2 <input type="checkbox" name="color" value="2" /><br /> Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br /> <select name="time"><br /> <option value="15">15</option> <option selected="selected" value="30">30</option> <option value="45">45</option> </select><br /><br /> R 1 <input type="radio" name="color" value="1" /><br /> R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br /> R 3 <input type="radio" name="color" value="3" /><br /><br /> <textarea>Default text</textarea><br /><br /> <p>Play with form values and then try to reset them</p> <button type="button" value="text">Reset text input</button> <button type="button" value="checkbox">Reset checkboxes</button> <button type="button" value="select">Reset select</button> <button type="button" value="radio">Reset radios</button> <button type="button" value="textarea">Reset textarea</button> <button type="button" value="form">Reset the Form</button> </form>

对于jQuery 1.6+:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

对于jQuery < 1.6:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

请看这篇文章: 使用jQuery重置多级表单

Or

$('#myform')[0].reset();

jQuery建议:

要检索和更改DOM属性，例如表单元素的选中、选中或禁用状态，请使用.prop()方法。