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

我正试图为我的新网站完成一个产品页面和篮子模板的设计，但在把所有的部分放在一起时遇到了困难

在下面的html代码中，使用

调用购物车/购物篮，但我需要它不可见或以某种方式隐藏，以便客户必须勾选复选框以同意条款和条件，然后才能与购物车/购物篮交互

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

任何帮助都将不胜感激

请在上面的框中打勾，确认您同意。

类似这样的内容： （复选框上的更改事件触发购物车div上的可见性类）

$（'#tandc'）。on（'change'，function（）{
如果（$（此）[0]。已选中）{
$（'.ct-cart'）.addClass（'ct-cart-visible'）；
}否则{
$（'.ct-cart-visible'）.removeClass（'ct-cart-visible'）；
}
})

/*我会使用特殊的类来显示/隐藏，只是为了在样式设置、购物车的显示方式上提供更多的灵活性*/
.ct车{
显示：无；
}
.ct车可见{
显示：块；
}

请在上面的框中打勾，确认您同意。

购物车内容

纯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{
显示：无；
}

请在上面的框中打勾，确认您同意。

仅当选中时显示：）

当复选框

更改时，您需要运行函数

如果
复选框
为
：选中
，
显示（）
ct购物车

。否则

隐藏
购物车


$（'#tandc'）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（“.ct cart”）.show（）；
}否则{
$（“.ct cart”）.hide（）；
}
});


请在上面的框中打勾，确认您同意。

运货马车
还有一种方法：

function toggle() {

  // convert the NodeList returned by document.querySelectorAll()
  // into an Array, using Array.from():
  Array.from(

    // using document.querySelectorAll() to find the elements that
    // match the selector returned from changed-element's
    // custom data-toggle attribute:
    document.querySelectorAll(this.dataset.toggle)

  // iterating over the Array of nodes:
  ).forEach(

    // using an Arrow function - which avoids changing the
    // 'this' - to toggle the class of 'hidden' depending
    // on whether the changed-checbox is currently checked
    // or not (applying the class-name if the evaluation is
    // true, removing it if false):
    el => el.classList.toggle('hidden', !this.checked)
  );
}

// creating a custom Event (albeit in this case it's the
// browser's 'change' event):
let changeEvent = new Event('change'),

// caching a reference to the relevant element upon which
// the function should fire:
    check = document.getElementById('tandc');


// binding the toggle() function (note the deliberate lack of
// parentheses) as the event-handler for the 'change' event:
check.addEventListener('change', toggle);

// firing the 'change' event on page load,
// in order that the relevant element will be
// shown or hidden appropriately:
check.dispatchEvent(changeEvent);


函数切换（）{
Array.from(
document.querySelectorAll（this.dataset.toggle）
)弗雷奇先生(
el=>el.classList.toggle（'hidden'，！this.checked）
);
}
让changeEvent=新事件（“更改”），
check=document.getElementById（'tandc'）；
check.addEventListener（'change'，toggle）；
检查调度事件（changeEvent）
.ct购物车{
不透明度：1；
过渡：不透明度0.5s线性；
}
.隐藏{
不透明度：0.1；
}

请在上面的框中打勾，确认您同意。

购物车内容
仅当勾选了
#tandc
复选框时，才显示
.ct购物车
？