要实现基于复选框切换的div点击,可以通过以下步骤来实现:
<input type="checkbox" id="checkbox">
<label for="checkbox">切换</label>
<div id="targetDiv">这是目标div</div>
#targetDiv {
display: none;
}
var checkbox = document.getElementById('checkbox');
var targetDiv = document.getElementById('targetDiv');
checkbox.addEventListener('click', function() {
if (checkbox.checked) {
targetDiv.style.display = 'block';
} else {
targetDiv.style.display = 'none';
}
});
以上代码中,我们通过addEventListener方法监听复选框的点击事件。当复选框被点击时,判断其checked属性的值,如果为true,则将目标div的display属性设置为'block',使其显示出来;如果为false,则将display属性设置为'none',使其隐藏起来。
这样,当用户点击复选框时,目标div就会根据复选框的状态进行显示与隐藏的切换。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云