Изменить содержимое div формы при выборе флажка?

Question

У меня есть два флажка First и Second

    <input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" /> First

    <br />

    <input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" /> Seconf

И две формы Form1

    <form>
    <div class="form-row">

        <div class="form-group col-md-6">
        <label for="first">Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="form-group col-md-6">
        <label for="">Phone</label>
        <input type="text" class="form-control" id="phone" name="phone" required>
        </div>
    </div>
    </form>

и Form 2

    <form>
    <div class="form-row">

        <div class="form-group col-md-6">
        <label for="inputCity">Address</label>
        <input type="text" class="form-control" id="address" name="address" required>
        </div>
    </div>
    </form>

Когда выбрана форма first - отображать содержимое first form, Аналогично для second - Second form.

https://codepen.io/thorstorm/pen/vYNpNYr

I видел много ответов reg show / hide и только содержимое одной формы. Есть предложения, как действовать?

Answer 1

Вот это я сделал для вас

var form1 = document.querySelector("#f1"),
    form2 = document.querySelector("#f2"),
    check1 = document.querySelector("#checkbox1"),
    check2 = document.querySelector("#checkbox2");

check1.onchange = function() {
  form1.classList.toggle("hidden");
}
check2.onchange = function() {
  form2.classList.toggle("hidden");
}

.hidden {
  display: none;
}

<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" checked/> First

<br />

<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" checked/> Second

<form id="f1">
<div class="form-row">

  <div class="form-group col-md-6">
    <label for="first">Name</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>
  <div class="form-group col-md-6">
    <label for="">Phone</label>
    <input type="text" class="form-control" id="phone" name="phone" required>
  </div>
</div>
</form>

<form id="f2">
<div class="form-row">

  <div class="form-group col-md-6">
    <label for="inputCity">Address</label>
    <input type="text" class="form-control" id="address" name="address" required>
  </div>
  </div>
</form>