js获取input值的方法

在JavaScript编程中，获取input元素的值是一项常见且基础的操作。掌握不同情况下获取input值的方法，对于构建交互性强、功能丰富的网页至关重要。

对于文本框（<input type="text">），最常用的方法是通过元素的value属性来获取其值。需要使用document.getElementById()、document.querySelector()等方法获取到对应的input元素对象。例如：

const inputElement = document.getElementById('myInput');
const inputValue = inputElement.value;
console.log(inputValue);

这段代码中，getElementById获取了id为myInput的input元素，然后通过value属性获取其值并打印到控制台。

当处理单选框（<input type="radio">）时，要获取被选中项的值。由于单选框通常是一组，需要遍历这组单选框，检查每个单选框的checked属性是否为true。示例代码如下：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

const radioInputs = document.querySelectorAll('input[type="radio"]');
let selectedValue;
for (let i = 0; i < radioInputs.length; i++) {
    if (radioInputs[i].checked) {
        selectedValue = radioInputs[i].value;
        break;
    }
}
console.log(selectedValue);

对于复选框（<input type="checkbox">），情况稍有不同。因为可以选择多个选项，所以需要遍历所有复选框，将被选中的选项的值收集到一个数组中。示例如下：

<input type="checkbox" value="apple">苹果
<input type="checkbox" value="banana">香蕉
<input type="checkbox" value="cherry">樱桃

const checkboxInputs = document.querySelectorAll('input[type="checkbox"]');
const selectedValues = [];
for (let i = 0; i < checkboxInputs.length; i++) {
    if (checkboxInputs[i].checked) {
        selectedValues.push(checkboxInputs[i].value);
    }
}
console.log(selectedValues);

对于下拉框（<select>），获取选中值也很简单。通过获取select元素对象，使用其value属性即可得到选中选项的值。代码如下：

<select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
</select>

const selectElement = document.getElementById('mySelect');
const selectedOptionValue = selectElement.value;
console.log(selectedOptionValue);

在JavaScript中获取input值的方法因input类型而异，但只要掌握了这些基本方法，就能灵活处理各种表单数据，为网页的交互功能提供有力支持。