在JavaScript（JS）中，获取用户输入数据是网页交互的核心部分。本文将详细介绍如何通过JavaScript获取文本框、下拉框和单选框的值，并提供简单实例。
1. **文本框（Text Input）**
在HTML中，文本框通常由`<input type="text">`定义。获取文本框的值，可以使用`getElementById()`函数，结合`.value`属性。例如，对于一个id为"test"的文本框，获取其值的代码如下：
```javascript
var t = document.getElementById("test").value;
```
反过来，若要将变量m的值赋给文本框，可以这样做：
```javascript
var m = "5";
document.getElementById("test").value = m;
```
2. **下拉列表框（Select Dropdown）**
下拉框由`<select>`元素创建，其中的选项由`<option>`元素定义。获取选中的选项值，可以使用以下代码：
```javascript
var s = document.getElementById("sel").value;
```
如果想将下拉框选中的"值"（如"3"）对应的"文本值"（"33"）赋给文本框"test"，可以编写如下JavaScript函数：
```javascript
function look() {
var se = document.getElementById("sel");
var option = se.getElementsByTagName("option");
var str = "";
for (var i = 0; i < option.length; ++i) {
if (option[i].selected) {
document.getElementById("test").value = option[i].text;
}
}
}
```
若要根据给定值自动选中下拉框中的选项，可以遍历所有选项并检查`value`属性：
```javascript
var m = "2";
for (var i = 0; i < document.getElementById("sel").length; i++) {
with (document.getElementById("sel").options[i]) {
if (value == m) {
selected = true;
}
}
}
```
3. **单选框（Radio Buttons）**
单选框由`<input type="radio">`定义，它们通过相同的`name`属性实现单选。获取被选中的单选按钮值，可以使用`getElementsByName()`函数，如下所示：
```html
<INPUT TYPE="radio" NAME="a" value="1">aaaaaaaaaa<br>
<INPUT TYPE="radio" NAME="a" value="2">bbbbbbbbb<br>
<INPUT TYPE="button" onclick="check();" value="test">
```
然后在JavaScript中检查哪个单选按钮被选中：
```javascript
function check() {
var sel = 0;
for (var i = 0; i < document.getElementsByName("a").length; i++) {
if (document.getElementsByName("a")[i].checked) {
sel = document.getElementsByName("a")[i].value;
}
}
if (sel == 1) {
alert("aaaaaaaaaa");
} else if (sel == 2) {
alert("bbbbbbbbb");
}
}
```
总结来说，通过JavaScript，我们可以方便地获取HTML表单元素如文本框、下拉框和单选框的值，并进行相应的操作，如设置新值或根据用户选择执行某些动作。这在动态网页开发中至关重要，能够实现丰富的用户交互体验。理解并掌握这些基本技巧，是成为一名合格的前端开发者的基础。
