这个问题是因为您正在清除#utility-info的 * 整个 * 内容，其中包含input元素及其值。
要解决此问题，请将选择器更改为直接针对input元素，然后使用val('')清除值。
还请注意，您可以通过缓存在调用DOM时创建的jQuery对象，以及通过使用toggle()方法来隐藏/显示基于checkbox的boolean checked属性的div元素，来改进逻辑并使其更加简洁。
下面是一个工作示例：

jQuery($ => {
  const $utilityInfo = $('#utility-info');
  const $actualUtils = $('#actual-utils');

  $('#actual').on('click', e => {
    const useActual = e.target.checked;
    $utilityInfo.toggle(!useActual);
    $actualUtils.toggle(useActual);
  });

  $('#clear-values').click(function() {
    $utilityInfo.find('input').val('');
  });
});

#actual-utils {
  display: none;
}

span {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="actual" name="actual-util-info"> Use actual data
<div>&nbsp;</div>
<div id="energy-info">
  <div id="utility-info">
    <div>Test 1 <input id="test1" type="number" name="test1"></div>
    <div>Test 2 <input id="test2" type="number" name="test2"></div>
  </div>
  <div id="actual-utils">
    <div>Test 3 <input id="actual1" type="number" name="actual1"></div>
    <div>Test 4 <input id="actual2" type="number" name="actual2"></div>
  </div>
  <div>&nbsp;</div>
  <button id="clear-values">Clear Element Data for Tests 1 & 2</button>
</div>

“best™”可能是实际使用声明式HTML，它可以在没有JS的情况下为您完成所有这些。<form>及其所有内部<input>元素可以通过<button type="reset">（或等效的<input type="reset">）重置为原始值。
除了对AT和机器完全清楚你的标记是什么，以及在JS被禁用的地方工作之外，它还允许你设置一个初始值并将其重置回来。

/* Toggle the checkbox to show one form at a time */
#actual:checked ~ * #utility-info,
#actual:not(:checked) ~ * #actual-utils {
  display: none;
}
span {
  padding: 10px;
}

<input type="checkbox" id="actual" name="actual-util-info"> Use actual data
<div>&nbsp;</div>
<div id="energy-info">
  <!-- Wrap in <form> elements -->
  <form id="utility-info">
    <div>Test 1 <input id="test1" type="number" name="test1"></div>
    <div>Test 2 <input id="test2" type="number" name="test2"></div>
  </form>
  <!-- Wrap in <form> elements -->
  <form id="actual-utils">
    <div>Test 3 <input id="actual1" type="number" name="actual1"></div>
    <div>Test 4 <input id="actual2" type="number" name="actual2"></div>
  </form>
  <div>&nbsp;</div>
  <!--
    Since our reset button is outside the <form>
    We use the form="" attribute to point to the correct one.
  -->
  <button id="clear-values" type="reset" form="utility-info">Clear Element Data for Tests 1 &amp; 2</button>
</div>