让我们把每个需要有条件显示/隐藏的部分称为“子表单”。你可以为每个子表单添加一个CSS类，例如：

<div class="subform1">
    <h1 id="test1">Test 1</h1>
  </div>

然后，你可以引入CSS规则来隐藏所有子表单，除了与当前选择的选项对应的子表单。跟踪该选择以便CSS可以看到它的一个好方法是将其作为包含所有选项的元素上的数据属性，例如<form>。您的初始值将确定初始可见的子表单：

<form data-selection="1" id="part-number" class="subform-group" ...>
  <!-- Now we can style anything inside here based on .subform-group[data-selection] -->
</form>

。。。以及相应的样式。。

/* Hide .subform1 unless it's currently selected */
.subform1 { display: none; }
.subform-group[data-selection="1"] .subform1 { display: block; }

为了将它们联系在一起，我们可以创建一个JS函数来更新data属性。也许你在一个页面上（甚至在一个表单中）有多组子表单，所以识别你正在更新的选择是很有用的：
一个三个三个一个
如果你需要额外的选项，你可以添加额外的subform CSS类;如果你需要多组子表单，你可以添加它们，确保使用一个单独的HTML元素和一个唯一的id来包含所有的子表单。
请参阅完整的代码片段以获得一个工作示例。

function show(subformGroupId, selection) {
  document.getElementById(subformGroupId).setAttribute("data-selection", selection);
}

.subform1,
.subform2,
.subform3,
.subform4  /* add extra subforms as needed ... */
{
  display: none;  /* Hide all forms by default */
}

.subform-group[data-selection="1"] .subform1,
.subform-group[data-selection="2"] .subform2,
.subform-group[data-selection="3"] .subform3,
.subform-group[data-selection="4"] .subform4  /* add extra subforms as needed ... */
{
  display: block;  /* Display the form matching the selected option */
}

<h1>New Part</h1>

<form action="/parts" method="POST" novalidate class="validated-form subform-group" id="part-number" data-selection="1">
  <div>
    <label class="form-label" for="partnum">Part Number</label>
    <input class="form-control" type="text" name="part[partnum]" id="partnum" required>
  </div>
  <div>
    <label class="form-label" for="description">Part  Description</label>
    <input class="form-control" type="text" name="part[description]" id="description" required>
  </div>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="part[type]" id="btnradio1" value="Purchased" autocomplete="off" onclick="show('part-number', 1)" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Purchased</label>

    <input type="radio" class="btn-check" name="part[type]" id="btnradio2" value="Assembly" autocomplete="off" onclick="show('part-number', 2)">
    <label class="btn btn-outline-primary" for="btnradio2">Assembly</label>

    <input type="radio" class="btn-check" name="part[type]" id="btnradio3" value="Machined" autocomplete="off" onclick="show('part-number', 3)">
    <label class="btn btn-outline-primary" for="btnradio3">Machined</label>
  </div>
  <div class="subform1">
    <h1 id="test1">Test 1</h1>
  </div>
  <div class="subform2">
    <h1 id="test2">Test 2</h1>
  </div>
  <div class="subform3" id="machined">
    <h1 id="test3">Test 3</h1>
    <div>
      <label class="form-label" for="material">Material</label>
      <input class="form-control" type="text" name="part[material]" id="material" required>
    </div>
  </div>
  <div><button>Add  Part</button></div>
</form>
<a href="/parts">Back to your Parts</a>