document radio点击触发
时间: 2023-10-15 16:05:37 浏览: 32
您想要实现什么样的效果呢?是在点击 radio 后触发某个文档的展示或隐藏吗?如果是的话,您可以在 HTML 中为 radio 绑定一个点击事件,然后在 JavaScript 中获取对应的文档元素并进行展示或隐藏操作。以下是一个示例代码:
```html
<!-- HTML -->
<input type="radio" name="doc" value="doc1" id="doc1-radio">
<label for="doc1-radio">文档1</label>
<input type="radio" name="doc" value="doc2" id="doc2-radio">
<label for="doc2-radio">文档2</label>
<div id="doc1">这是文档1的内容</div>
<div id="doc2">这是文档2的内容</div>
```
```javascript
// JavaScript
const docRadios = document.querySelectorAll('input[type="radio"][name="doc"]');
const docs = {
"doc1": document.getElementById("doc1"),
"doc2": document.getElementById("doc2")
};
docRadios.forEach(radio => {
radio.addEventListener("click", () => {
const selectedDoc = docs[radio.value];
Object.values(docs).forEach(doc => {
if (doc === selectedDoc) {
doc.style.display = "block";
} else {
doc.style.display = "none";
}
});
});
});
```
在上面的示例代码中,我们首先获取所有的 name 为 "doc" 的 radio 元素,并为它们绑定了一个点击事件。在点击事件中,我们获取了对应的文档元素,并对所有文档元素进行了展示或隐藏的操作。当点击某个 radio 后,它对应的文档元素会展示出来,而其他文档元素则会被隐藏。