我试图为我的新网站完成产品页面和购物篮模板的设计,但无法将所有组件组合在一起。

在购物车/购物篮下方的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>

最佳答案

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

关于javascript - 隐藏/隐藏div,直到选中复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48486701/

10-12 12:38
查看更多