如何使用jquery重置所有输入、li和文本区域字段

Question

我有很多输入、文本区域和li控件，如果li是第一个值，我想将所有这些重置为空。

我试过使用jquery：

$(".classname").find("input:text").val("");

这对我不起作用。我也试过：

$(".classname input:text").val("");

也不起作用，但如果没有val调用，它会返回一个输入元素列表。

HTML:

<div id="bio" class="dlgpanel ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="false" style="display: block;"><div style="float:left"><span class="fldlabel">First name:</span><br><span class="fldlabel">Surname:</span><br><span class="fldlabel">Gender:</span><br><span class="fldlabel">Date of Birth:</span><br><span class="fldlabel">Summary /<br>Foreword:</span><br></div><div style="float:left; margin-left: 4px;"><input type="text" id="vcFirstName" maxlength="24"><br><input type="text" id="vcSurName" maxlength="24"><br><select id="vcGender"><option value="Male">Male</option><option value="Female">Female</option></select><br><input type="text" id="dtDOB" class="is-datetimeEntry"><span class="datetimeEntry-control" style="display: inline-block; background: url('/scripts/jquery/dateentry/spinnerDefault.png') 0 0 no-repeat; width: 20px; height: 20px;"></span><span id="dtDOBtxt" style="display:none"></span><br><textarea rows="8" style="width:100%;" id="txtBioSummary"></textarea><br></div><div style="float:left; margin-left: 12px;"><span class="fldlabel">Enter the christian name for this person.</span><br><span class="fldlabel">Enter the family / birth name for this person.</span><br><span class="fldlabel">Is this person male or female?</span><br><span class="fldlabel">When was this person born DD/MM/YYYY ?</span><br><span class="fldlabel">An optional description / summary / forward about this individual.</span><br><p><button id="bioSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button"><span class="ui-button-text">Save</span></button></p></div>

Answer 1

如果您正在使用一个表单，如果您添加一个rest按钮，它将重置，否则您只能获得输入类型文本并清空值

function reset() {
$(".classname").find("input[type='text']").val("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='classname'>
<input type='text'>
<input type='text'>
<input type='text'>
<input type='number' placeholder='add number but wont reset'>
</div>
<button onclick='reset()'>Reset</button>