javascript - 根据单选按钮单击显示/隐藏表单域

Question

所以我有一个单选按钮，选中后，我希望显示/隐藏以下两个字段。这如何通过 JS 实现？

<div class="custom-control custom-switch mt-3">
    <input type="checkbox" class="custom-control-input" id="rtk1" name="rtk[checked][]" value="1">
    <label class="custom-control-label" for="rtk1">The categories of personal information <?= $config->get_company(); ?> has collected about you.</label>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <div class="col-sm-11">
        <i>Please provide the following information to be used for verification purposes:</i>
    </div>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field1" class="col-sm-2 col-form-label">Field 1</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="rtk1Field1" name="rtk[1][field1]" required>
        <div class="invalid-feedback">
            Field 1 is required.
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field2" class="col-sm-2 col-form-label">Field 2</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="rtk1Field2" name="rtk[1][field2]" required>
        <div class="invalid-feedback">
            Field 2 is required.
        </div>
    </div>
</div>

Answer 1

工作演示:https://jsfiddle.net/prceax3v/3/

HTML

<div class="custom-control custom-switch mt-3">
  <input type="checkbox" class="custom-control-input" id="rtk1" name="rtk[checked][]" value="1">
  <label class="custom-control-label" for="rtk1">The categories of personal information <?= $config->get_company(); ?> has collected about you.</label>
</div>
<div class="row mt-3">
  <div class="col-sm-1"></div>
  <div class="col-sm-11">
    <i>Please provide the following information to be used for verification purposes:</i>
  </div>
</div>
<div id='form-wrapper'>


  <div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field1" class="col-sm-2 col-form-label">Field 1</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="rtk1Field1" name="rtk[1][field1]" required>
      <div class="invalid-feedback">
        Field 1 is required.
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field2" class="col-sm-2 col-form-label">Field 2</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="rtk1Field2" name="rtk[1][field2]" required>
      <div class="invalid-feedback">
        Field 2 is required.
      </div>
    </div>
  </div>
</div>

JS

const formWrapper = document.getElementById('form-wrapper');

document.getElementById('rtk1').addEventListener('change', (e) => {
  if (e.target.checked) {
    formWrapper.style.display = 'none'
  } else {
    formWrapper.style.display = ''
  }
})