我有一个网页，它使用divs（）和一些javascript来显示带有多个标签的标签式网页的外观，每个标签都有一组选项。有一个提交按钮可以提交设置（适用于所有选项卡）并启动任务，还有一个重置按钮，可以将设置重置为加载页面时最初设置的设置。
问题是复位按钮会重置页面上的所有内容，即所有选项卡，但用户希望它只是重置当前选项卡上的值，实现此目的的最佳方法是什么？
示例： 如果我在tab1上使用复选框1-9我将checkbox1设置为true，然后我转到tab2，复选框为10-19，我更改了其中一些复选框的值，实现了我的错误，然后点击reset to go回到起始值。但是这也会重置复选框1，这是他们不会期望的，因为当他们点击重置时该选项卡不是可见的，这就是问题
<main>
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="openTab(event, 'menu_basic')">
Basic
</button>
<button class="tablinks" onclick="openTab(event, 'menu_match')">
Match
</button>
<button class="tablinks" onclick="openTab(event, 'menu_artwork')">
Artwork
</button>
<button class="tablinks" onclick="openTab(event, 'menu_genres')">
Genres
</button>
<button class="tablinks" onclick="openTab(event, 'menu_format')">
Format
</button>
<button class="tablinks" onclick="openTab(event, 'menu_classical')">
Classical
</button>
<button class="tablinks" onclick="openTab(event, 'menu_filenaming')">
File Naming
</button>
<button class="tablinks" onclick="openTab(event, 'menu_save')">
Save
</button>
</div>
<form action="/fixsongs.fix" name="Start" id="Start" method="post">
<div id="menu_basic" class="tabcontent">
<table>
<tr>
<td colspan="2">
<input checked="checked" name="preview" id="preview" type="checkbox" title="Preview only, make no actual changes to your files.">
<label for="preview" title="Preview only, make no actual changes to your files.">
Preview only
</label>
</td>
</tr>
<tr>
<td>
<label title="If song already fully matched to a MusicBrainz release should it be ignored, metadata updated and filename updated with any new metadata using existing match or rematched as if not currently matched." for="actionIfSongAlreadyMatched">
For songs already fully matched
</label>
</td>
<td>
<select name="actionIfSongAlreadyMatched" id="actionIfSongAlreadyMatched" size="3" class="combo">
<option value="0">Ignore</option><option value="1">Update Metadata and Filename only</option><option selected="selected" value="2">Rematch</option>
</select>
</td>
</tr>
<tr>
<td>
<label title="Files can be renamed based on their metadata, but realize this can cause files to be renamed and moved to different folders and this could cause problems for other applications.We usually only recommend you rename songs when they have been matched to a release thus ensuring all songs on same release are renamed together. But you can also rename songs that have been matched song only, songs that have not been matched at all but with existing metadata and all songs even if they have no metadata." for="renameFiles">
Rename files based on metadata
</label>
</td>
<td>
<select name="renameFiles" id="renameFiles" size="5" class="combo">
<option value="0">No</option><option value="1">Yes if matched to a release</option><option value="2">Yes if matched to a release or song</option><option value="3">Yes if has metadata</option><option selected="selected" value="4">Yes, for all files</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input checked="checked" name="modifyArtwork" id="modifyArtwork" type="checkbox" title="Adds or replaces artwork. See Artwork tab for more options">
<label for="modifyArtwork" title="Adds or replaces artwork. See Artwork tab for more options">
Update Artwork
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input checked="checked" name="modifyGenres" id="modifyGenres" type="checkbox" title="Add or replace genre information, see the Genre tab for more options.">
<label for="modifyGenres" title="Add or replace genre information, see the Genre tab for more options.">
Update Genres
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input checked="checked" name="modifyAcousticAnalysis" id="modifyAcousticAnalysis" type="checkbox" title="Modify Mood and other acoustic attributes such as BPM by using acoustic analysis, this is only available in SongKongPro">
<label for="modifyAcousticAnalysis" title="Modify Mood and other acoustic attributes such as BPM by using acoustic analysis, this is only available in SongKongPro">
Update Mood and other acoustic attributes such as BPM (SongKong Pro Only)
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input checked="checked" name="matchByFolderOnly" id="matchByFolderOnly" type="checkbox" title="Matching will only occur for a grouping (usually a folder) if all files within the grouping can be matched to a single album">
<label for="matchByFolderOnly" title="Matching will only occur for a grouping (usually a folder) if all files within the grouping can be matched to a single album">
Only allow match if all songs in grouping match to one album
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input checked="checked" name="matchAllSongsOnReleaseOnly" id="matchAllSongsOnReleaseOnly" type="checkbox" title="Matching will only occur if every song on the album was matched by a file in your music collection">
<label for="matchAllSongsOnReleaseOnly" title="Matching will only occur if every song on the album was matched by a file in your music collection">
Only allow match if all tracks in album were matched
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<label align="left">
Base Folder
</label>
</td>
<td colspan="3">
<label align="left">
Sub Folder
</label>
</td>
</tr>
<tr><td><input readonly="readonly" type="text" id="basefolder" name="basefolder" value="E:\HiRes\HDtracks"></td><td><input readonly="readonly" type="text" id="subfolder" name="subfolder" value=""></td><td><button type="button" onclick="shift_left();"><img src="style/images/left_grey.png"></button></td><td><button type="button" onclick="shift_right();"><img src="style/images/right_grey.png"></button></td></tr>
</table>
<div>
<br>
<br>
<input type="reset" name="reset" value="Reset">
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="start" value="Start">
</div>
</div>
<div id="menu_match" class="tabcontent">
.......
答案 0 :(得分：0)
首先，它的区别是什么，或者它没有？其次，无需重置按钮即可轻松实现此目的。这是我制作的一些jQuery代码：
$(function() {
$("#button").click(function() {
$("#box1").val("");
$("#box2").val("");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "box1" type = "text">
<input id = "box2" type = "text">
<input id = "box3" type = "text" hidden>
<input id = "button" type = "button" value = "Reset">
如果您愿意，这里是纯JavaScript：
var reset = function() {
document.getElementById("box1").value = "";
document.getElementById("box2").value = "";
}
document.getElementById('button').onclick = reset;<input id = "box1" type = "text">
<input id = "box2" type = "text">
<input id = "box3" type = "text" hidden>
<input id = "button" type = "button" value = "Reset">
这种方式（即使我不确定为什么这很重要），它只会删除指定的输入框。
答案 1 :(得分：0)
使用这个通用的javascript函数，针对文本输入字段，检查框和选择进行测试
<div id="menu_basic" class="tabcontent">
<input checked="checked" name="preview" id="preview" type="checkbox" title="Preview only, make no actual changes to your files.">
......
<div>
<button type="button" name="reset" onclick="resetOptions('menu_basic');">
Reset
</button>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="start" value="Start">
</div>
</div>
function resetOptions(divName) {
var inputs = document.getElementById(divName).getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
if(inputs[i].type=='checkbox')
{
if(inputs[i].defaultChecked)
{
inputs[i].checked=true;
}
else
{
inputs[i].checked=false;
}
}
else
{
inputs[i].value=inputs[i].defaultValue;
}
}
inputs = document.getElementById(divName).getElementsByTagName('select');
for (i = 0; i < inputs.length; i++) {
for(j = 0; j < inputs[i].options.length; j++) {
var option = inputs[i].options[j];
option.selected = option.defaultSelected;
}
}
}