javascript - 隐藏/清空 div，直到选中复选框

Question

我正在尝试为我的新网站完成产品页面和购物篮模板的设计，但在将所有部分组合在一起时遇到困难。

在下面的 html 代码中，使用 <div class="ct-cart"></div> 调用购物车/购物篮但我需要使其不可见或以某种方式被清空，以便客户必须勾选复选框才能同意条款和条件，然后才能与购物车/购物篮进行交互。

我尝试了一些在网上找到的脚本来尝试隐藏它，但无法让它工作，即使在(希望)删除任何 jQuery 冲突之后也是如此。

任何帮助将不胜感激。

<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart"></div>

Answer 1

纯JS实现。 (如果你真的不需要jquery)

document.getElementById('tandc').onchange = function(){
  var cart = document.getElementsByClassName('ct-cart')[0];
  if (this.checked) cart.classList.remove('hide');
  else cart.classList.add('hide');
}

.hide{
display: none;
}

<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart hide">Shown only if checked :)</div>