根据单选按钮单击显示/隐藏表单字段

Question

So I have a radio button that when checked, I would like the below two fields shown/hidden. How would this be achievable via 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

Working demo: 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 = ''
  }
})

Answer 2

First, what you've provided is a checkbox, not a radio button. If you want to use a checkbox, you can accomplish what you're asking with the following code:

document.querySelector('input#rtk1').addEventListener( 'change', function() {
if(this.checked) {
    document.querySelectorAll('input[type="text"]').forEach(function(el) {
      el.style.display = 'none';
    });
} else {
  document.querySelectorAll('input[type="text"]').forEach(function(el) {
    el.style.display = 'block';
  });
}
});

If you want to hide the labels next to each text field as well, I would suggest adding a unique class to each row container such as, text-input-container , then putting that class name inside the querySelectorAll calls instead of input[type="text"]