📅 最后修改于: 2023-12-03 15:38:08.015000 🧑 作者: Mango
单选按钮可以方便地控制页面上的元素显示或隐藏。以下是一个基本的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮示例</title>
<style>
.box {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<label>
<input type="radio" name="box" value="show" checked>显示
</label>
<label>
<input type="radio" name="box" value="hide">隐藏
</label>
<div class="box">这是一个需要控制显示与隐藏的元素。</div>
<script>
var boxes = document.getElementsByClassName('box');
function toggleBox() {
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (this.value == 'show') {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
}
}
var radios = document.getElementsByName('box');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', toggleBox);
}
</script>
</body>
</html>
在上面的示例中，我们使用了两个单选按钮来控制一个 div 元素的显示与隐藏。首先，我们将该元素的 display 属性设置为 none，以便在页面加载时隐藏它。然后，我们使用 JavaScript 绑定了单选按钮的点击事件，从而在点击单选按钮时改变该元素的 display 属性。
我们使用了 getElementsByClassName() 方法来查找所有需要控制的 div 元素，并在 toggleBox() 函数中循环处理它们。在该函数中，我们检查当前选中的单选按钮的值来确定是否显示或隐藏该元素。如果选中了“显示”单选按钮，我们将其 display 属性设置为 block，否则将其设置为 none。
最后，我们使用 addEventListener() 方法为每个单选按钮绑定了 click 事件，以便在单选按钮被点击时调用 toggleBox() 函数。这使得用户可以方便地控制元素的显示或隐藏。
总之，使用单选按钮是一种简单而强大的方式来控制页面元素的显示或隐藏。通过结合 JavaScript，您可以轻松地实现这种效果，并且可以使用 CSS 定义元素的样式，以便更好地控制其外观。