单选框跳转页面
时间: 2023-06-21 21:07:16 浏览: 67
单选框跳转页面可以通过以下步骤实现:
1. 在 HTML 中添加单选框元素和选项。
```html
<form>
<label>
<input type="radio" name="page" value="page1"> Page 1
</label>
<label>
<input type="radio" name="page" value="page2"> Page 2
</label>
<label>
<input type="radio" name="page" value="page3"> Page 3
</label>
<button type="submit">Go</button>
</form>
```
2. 在 JavaScript 中添加事件监听器,以便在单选框选项更改时获取选中的值。
```javascript
const form = document.querySelector('form');
const radios = form.elements.page;
let selectedValue;
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
selectedValue = this.value;
});
}
```
3. 在 JavaScript 中添加重定向功能,以便将用户重定向到所选页面。
```javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
if (selectedValue) {
window.location.href = selectedValue + '.html';
}
});
```
在这个例子中,我们将用户重定向到名为 `page1.html`、`page2.html` 或 `page3.html` 的页面,具体取决于用户选择的单选框选项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)