我试图为我的新网站完成产品页面和购物篮模板的设计,但无法将所有组件组合在一起。
在购物车/购物篮下方的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 & 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 & Conditions</a>.</label>
</p>
<div class="ct-cart hide">Shown only if checked :)</div>
关于javascript - 隐藏/隐藏div,直到选中复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48486701/