本文介绍如何使用 JavaScript 配合 jQuery 清空特定 div 区域内的所有 input 标签值。通过遍历指定容器内的输入元素并重置其值，同时恢复默认选项，实现搜索条件的快速重置功能。
HTML 页面结构中的输入容器
在 HTML 页面结构中，通常包含用于搜索或表单输入的容器。例如，使用特定的 div 元素（如 id 为 search_songs_a 和 search_songs_b 的容器）来组织输入字段。这些容器内可能包含表格结构，其中嵌套了 text 类型的 input 标签以及 radio 单选按钮，用于收集如钢琴曲名称、演奏者及属性分类等信息。
<div class="col-xs-9" id="search_songs_a">
<table>
<tbody>
<tr>
<th>钢琴曲名称：</th>
<td><input type="text" name="info[gqq_name]" id="gqq_name" style="width:200px;"/></td>
<th style="padding-left:10px;">演奏者：</th>
<td><input type="text" name="info[gqq_player]" id="gqq_player" style="width:200px;"/></td>
</tr>
</tbody>
</table>
lt;/div>
<div class="col-xs-9" id="search_songs_b">
<table>
<tbody>
<tr>
<th>属 性：</th>
<td>
<span><input type="radio" name="info[gqq_shuxing]" value="不限" checked="checked"/><label>不限</label></span>
<span><input type="radio" name="info[gqq_shuxing]" value="流行钢琴曲"/><label>流行钢琴曲</label></span>
<span><input type="radio" name="info[gqq_shuxing]" value="古典钢琴曲"/><label>古典钢琴曲</label></span>
<span><input type="radio" name="info[gqq_shuxing]" value="爵士钢琴曲"/><label>爵士钢琴曲</label></span>
<span><input type="radio" name="info[gqq_shuxing]" value="钢琴练习曲"/><label>钢琴练习曲</label></span>
</td>
</tr>
</tbody>
</table>
lt;/div>JavaScript 清空逻辑实现
在 JavaScript 页面中，可以通过定义一个函数来执行清空操作。利用 jQuery 选择器定位到特定的容器（如 #search_songs_a），并选取该容器内的所有 :input 元素。通过 each 方法遍历这些元素，将每个元素的值设置为空字符串。此外，为了重置单选按钮的状态，可以单独选中具有特定 name 和 value 属性（如 value='不限'）的 radio 输入框，并将其 checked 属性设置为 true，从而完成整个搜索条件的重置。
//清空钢琴曲搜索条件
function clearsongs()
{
$("#search_songs_a :input").each(function () {
$(this).val("");
});
$("input[name='info[gqq_shuxing]'][value='不限']").attr("checked",true);
}