Javascript 在复选框选择时更改窗体的div内容？

我有两个复选框

第一个

和

第二个

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

    <br />

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

和

表格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>

地址

选择

第一个

表单时-显示

第一个表单

内容，第二个-

第二个表单

也是如此

---

我看到许多答案显示/隐藏，只有单一表单内容。对如何进行有什么建议吗？

这里我为您做了这个

var form1=document.querySelector（“#f1”），
form2=document.querySelector（“#f2”），
check1=document.querySelector（#checkbox1”），
check2=document.querySelector（#checkbox2”）；
check1.onchange=函数（）{
form1.classList.toggle（“隐藏”）；
}
check2.onchange=函数（）{
form2.classList.toggle（“隐藏”）；
}

。隐藏{
显示：无；
}

首先


第二
名称
电话
地址

请使用JavaScript更新您的问题，并解释您尝试过的内容中哪些不起作用。您尝试过哪些？我们希望您在发布之前会努力解决您的问题。然后，当你发表文章时，你的问题将是关于你在尝试中遇到的特定问题，而不是“我该怎么做？”使用

.onchange

事件侦听器来做这件事对不起，这对html来说是个新问题。将更新我的工作内容。

    <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>