Javascript 为什么更改父类会清空输入？

我试图在父元素（div/form）上切换类。我的CSS基于父类更改某些表单元素的可见性

当类在div/form上更新时，表单中的所有输入都被清空/更改为无值。功能在大多数输入上都是正常的，但是对于那些总是可见的输入，我不想在隐藏表单时丢失值

基本上，我有一个基本的搜索表单和一个高级表单

编辑：香草JavaScript（不是jQuery）按预期工作。。。为什么是jQuery

var d = document.getElementById("div");
d.className = d.className + " advanced";

下面是全部内容：

CSS:

HTML:

<div id="div">
<form id="searchForm">
<fieldset>
  <div>
    <label for="term">Semester:</label>
    <select id="term">
      <option disabled></option>
    </select>
  </div>
  <div>
    <label for="subj">Subject(s):</label>
    <input type="text" id="subj"></select>
  </div>
  <div class="search-advanced">
    <label for="crse">Course Number:</label>
    <input type="text" id="crse" maxlength="5">
  </div>
  <div class="search-advanced">
    <label for="sec">Section:</label>
    <input type="text" id="sec" maxlength="3">
  </div>
  <div class="search-advanced">
    <label for="crn">CRN(s):</label>
    <input type="text" id="crn">
  </div>
  <div class="search-advanced">
    <label for="title">Title:</label>
    <input type="text" id="title">
  </div>
</fieldset>
</form>
</div>

您正在将

与类型

reset

一起使用，这将把表单的所有控件设置为初始值。从：

输入元素表示一个按钮，当激活时，该按钮将重置 形式

<div id="div">
<form id="searchForm">
<fieldset>
  <div>
    <label for="term">Semester:</label>
    <select id="term">
      <option disabled></option>
    </select>
  </div>
  <div>
    <label for="subj">Subject(s):</label>
    <input type="text" id="subj"></select>
  </div>
  <div class="search-advanced">
    <label for="crse">Course Number:</label>
    <input type="text" id="crse" maxlength="5">
  </div>
  <div class="search-advanced">
    <label for="sec">Section:</label>
    <input type="text" id="sec" maxlength="3">
  </div>
  <div class="search-advanced">
    <label for="crn">CRN(s):</label>
    <input type="text" id="crn">
  </div>
  <div class="search-advanced">
    <label for="title">Title:</label>
    <input type="text" id="title">
  </div>
</fieldset>
</form>
</div>

$(function () {
    $('#advanced').click(function () {
        $('#div').toggleClass('advanced')
    })
})