Woocommerce Checkout页面

Question

我的woocommerce网站的checkoutpage上有一个复选框。我想编写一个函数，如果选中此复选框，则div将下拉并附带其他信息。

该复选框的ID为#unattended

但我不知道从哪里开始：/

Anyhelp将不胜感激

Answer 1

是的，好问题。这是一个例子（我评论了代码），向您展示它是如何完成的：

function showInfo(box) {

  if (box.checked == true) { // if the checkbox is checked

    document.getElementById('information').className = "show";
    // show the div

  } else if (box.checked == false) { // if it's not

    document.getElementById('information').className = "hide";
    // hide the div

  }

}

#information { /* This styles the div and makes it in the center of the page */
  position: fixed;
  display: block;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hide { /* these are the styles for when the div is hidden */
  top: -20px;
  transition: top 0.6s;
}
.show { /* these are the styles for when the div is visible */
  top: 0;
  transition: top 0.6s;
}

<div id="information" class="hide">Put lots and lots and lots and lots of information here.</div><br>

<input type="checkbox" id="unattended" onclick="showInfo(this)" />

我希望这会帮助你！如果您需要其他帮助，请在下面评论。