时间戳

首页 > 解决方案 > 在复选框选择上更改表单的 div 内容？

javascript - 在复选框选择上更改表单的 div 内容？

问题描述

我有两个复选框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

我看到了很多关于显示/隐藏的答案，而且只有单一的表单内容。关于如何进行的任何建议？

标签： javascripthtmlcss

解决方案

这是我为你做的

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>

推荐阅读