复选框显示/隐藏不使用jQuery可以通过原生JavaScript来实现。以下是一个示例代码:
HTML部分:
<input type="checkbox" id="myCheckbox">显示/隐藏内容<br>
<div id="myContent" style="display: none;">
这是要显示/隐藏的内容
</div>
JavaScript部分:
var checkbox = document.getElementById("myCheckbox");
var content = document.getElementById("myContent");
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
content.style.display = "block";
} else {
content.style.display = "none";
}
});
上述代码中,我们首先通过getElementById
方法获取到复选框和内容的元素。然后,我们使用addEventListener
方法为复选框的change
事件添加一个监听器。当复选框的状态改变时,监听器会执行相应的代码。在监听器中,我们通过判断复选框的checked
属性来确定是否显示或隐藏内容,然后通过设置内容元素的display
样式来实现显示或隐藏。
这种方法不使用jQuery,可以减少对外部库的依赖,提高页面加载速度。同时,原生JavaScript也提供了丰富的DOM操作方法,可以满足大部分开发需求。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估。
领取专属 10元无门槛券
手把手带您无忧上云