Woocommerce 结帐页面答案

【问题标题】：Woocommerce Checkout pageWoocommerce 结帐页面
【发布时间】：2015-01-17 18:41:51
【问题描述】：

我的 woocommerce 网站的结帐页面上有一个复选框。我想编写一个函数，如果选中此复选框，则 div 将下拉包含其他信息。

复选框的 id 为#unattended

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

任何帮助将不胜感激

【问题讨论】：

标签： wordpress forms function woocommerce conditional

【解决方案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)" />

希望对您有所帮助！如果您需要其他帮助，请在下方发表评论。

【讨论】：