我想清除表单中的所有输入和文本区域字段。当使用reset类的输入按钮时,它的工作原理如下:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

这将清除页面上的所有字段,而不仅仅是表单中的字段。我的选择器看起来像什么形式的实际重置按钮生活?


当前回答

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

其他回答

我写了一个通用的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("#review-form")[0].reset();

$("#review-form").get().reset();
$('#editPOIForm').each(function(){ 
    this.reset();
});

其中editPOIForm是表单的id属性。

我在这里看到的代码和相关的SO问题似乎不完整。

重置表单意味着从HTML中设置原始值,所以我根据上面的代码将其放在一个小项目中:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

如果我遗漏了什么或者有什么需要改进的地方,请告诉我。

如果有人还在阅读这篇文章,这里有一个最简单的解决方案,使用的不是jQuery,而是纯JavaScript。如果你的输入字段在表单中,有一个简单的JavaScript重置命令:

document.getElementById("myform").reset();

更多信息请点击这里: http://www.w3schools.com/jsref/met_form_reset.asp

干杯!