在选中复选框时使用id显示和隐藏,可以通过以下步骤实现:
下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Element on Checkbox Selection</title>
</head>
<body>
<label for="checkbox">Show/Hide Element:</label>
<input type="checkbox" id="checkbox">
<div id="target" style="display: none;">
This element will be shown/hidden.
</div>
<script>
var checkbox = document.getElementById("checkbox");
var target = document.getElementById("target");
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
target.style.display = "block";
} else {
target.style.display = "none";
}
});
</script>
</body>
</html>
在上述示例中,当复选框被选中时,目标元素将显示出来;当复选框未被选中时,目标元素将隐藏起来。你可以根据实际需求修改目标元素的内容和样式。
领取专属 10元无门槛券
手把手带您无忧上云