element radio 点击时间控制其他元素显示隐藏
时间: 2023-06-14 14:05:45 浏览: 48
可以使用JavaScript来实现element radio的点击事件控制其他元素的显示和隐藏。具体实现步骤如下:
1. 获取要控制的元素和radio元素。
2. 给radio元素添加点击事件监听器。
3. 在事件处理函数中,判断点击的radio元素的值,如果符合条件,则显示控制的元素,否则隐藏控制的元素。
以下是一个示例代码:
HTML部分:
```
<input type="radio" name="radio" value="show" id="show">显示
<input type="radio" name="radio" value="hide" id="hide">隐藏
<div id="controlled-element">这是要控制的元素</div>
```
JavaScript部分:
```
// 获取要控制的元素和radio元素
const controlledElement = document.getElementById('controlled-element');
const showRadio = document.getElementById('show');
const hideRadio = document.getElementById('hide');
// 给radio元素添加点击事件监听器
showRadio.addEventListener('click', toggleControlledElement);
hideRadio.addEventListener('click', toggleControlledElement);
// 点击事件处理函数
function toggleControlledElement(event) {
const value = event.target.value;
if (value === 'show') {
controlledElement.style.display = 'block';
} else {
controlledElement.style.display = 'none';
}
}
```
这样,当点击radio元素时,就可以实现控制其他元素的显示和隐藏了。