Javascript 复选框打开表单容器并滚动到它；关闭按钮重置表单并取消选中复选框

我正在做一个戒烟表格，需要有人帮我解决

这是我想要的，但我的javascript知识不是最好的=/：

如果复选框为：选中，则应打开带有一些输入的容器。通过 单击复选框，它将滚动到最近打开的 容器

在这个容器中有一个关闭按钮、一个输入和一个文本区域。通过单击关闭按钮，该按钮应关闭容器并仅重置包含的输入。这也应该 不选中复选框，但不滚动

这是我的HTML

<form method="" action="" name="form1">
  <fieldset>

    <label>
      <input type="checkbox" name="checkbox1" value="one" class="class1"/>
      <span>Checkbox 1</span>
    </label> 

    <label>
      <input type="checkbox" name="checkbox2" value="two" class="class2"/>
      <span>Checkbox 2</span>
    </label> 

    <label>
      <input type="checkbox" name="checkbox3" value="three" class="class3"/>
      <span>Checkbox 3</span>
    </label> 

      <div id="box1" class="xshow animated container">
      <h1>This opens because checkbox 1 is :checked</h1>
      <label>Text1:</label>
      <input type="text" value="" name="text1"/>
      <label>Textarea1:</label>
      <textarea name="textarea1"></textarea>
      <a class="closebutton">Close and Reset only text1 and textarea1</a>
    </div>

    <div id="box2" class="xshow animated container">
      <h1>This opens because checkbox 2 is :checked</h1>
      <label>Text2:</label>
      <input type="text" value="" name="text2"/>
      <label>Textarea2:</label>
      <textarea name="textarea2"></textarea>
      <a class="closebutton">Close and Reset only text2 and textarea2</a>
    </div>

    <div id="box3" class="xshow animated container">
      <h1>This opens because checkbox 3 is :checked</h1>
      <label>Text3:</label>
      <input type="text" value="" name="text3"/>
      <label>Textarea3:</label>
      <textarea name="textarea3"></textarea>
      <a class="closebutton">Close and Reset only text3 and textarea3</a>
    </div>

  </fieldset>
</form>

如果有人能帮我或者给我一个建议，让我自己解决这个问题，那就太棒了

---

谢谢大家

请在你的问题中加入相关代码。嘿，大卫，谢谢。我已经编辑了我的第一篇文章

/* ----------------------------- */
/* == 1 Checkbox + 1 Box     */
/* ----------------------------- */ 
$('input:checkbox[name=checkbox1]').change(function(){
    if($(this).is(":checked")) {
    $("#box1").removeClass("xshow").addClass("bounceIn");

} else {
    $("#box1").addClass("xshow");
    }
});


/*Close Button*/
$('.closebutton').click(function() {
     $("#box1").removeClass("bounceIn").addClass("xshow");
    $("input:checkbox[name=checkbox1]").attr('checked', false);
});





/* ----------------------------- */
/* == 2 Checkbox + 2 Box     */
/* ----------------------------- */ 
$('input:checkbox[name=checkbox2]').change(function(){
    if($(this).is(":checked")) {
    $("#box2").removeClass("xshow").addClass("bounceIn");

} else {
    $("#box2").addClass("xshow");
    }
});


/*Close Button*/
$('.closebutton').click(function() {
     $("#box2").removeClass("bounceIn").addClass("xshow");
    $("input:checkbox[name=checkbox2]").attr('checked', false);
});





/* ----------------------------- */
/* == 3 Checkbox + 3 Box     */
/* ----------------------------- */ 
$('input:checkbox[name=checkbox3]').change(function(){
    if($(this).is(":checked")) {
    $("#box3").removeClass("xshow").addClass("bounceIn");

} else {
    $("#box3").addClass("xshow");
    }
});


/*Close Button*/
$('.closebutton').click(function() {
     $("#box3").removeClass("bounceIn").addClass("xshow");
    $("input:checkbox[name=checkbox3]").attr('checked', false);
});