js获取input的value(获取input值的方法，纯JS实现)

Introduction

For developers today, one of the essential tasks is to retrieve and utilize data from user input fields. One such input field is the HTML input element. The input element allows users to input various types of data such as text, numbers, dates, and file uploads. To make use of this data, we need to first extract it from the input element using JavaScript.

In this article, we will explore the various ways in which we can retrieve the value of an input element using pure JavaScript. We will cover the different types of input elements, including text, checkbox, radio, and select elements.

Retrieving the Value of a Text Input Element

The text input element is the most commonly used input element, and it allows users to input text data. To retrieve the value of a text input element using JavaScript, we first need to select it using the document object.

We can select an input element using its ID, name, or class. Once we have selected the element, we can retrieve its value using the value property. Here is an example:

```

```

In this example, we select the input element using its ID "name". Then, we retrieve its value using the value property and store it in the nameValue variable.

Retrieving the Value of a Checkbox Input Element

A checkbox input element is used to allow users to select multiple options from a list. Retrieving the value of a checkbox input element is slightly different from a text input element.

When a checkbox is checked, its value is "on". But, if it is not checked, its value is undefined. Therefore, we need to check whether the checkbox is checked before retrieving its value. Here is an example:

```

```

In this example, we select the checkbox element using its ID "option1". Then, we check whether it is checked using the checked property. If it is checked, we retrieve its value using the value property and store it in the option1Value variable.

Retrieving the Value of a Radio Input Element

Radio input elements are used when users need to choose a single option from a list. Retrieving the value of a radio input element is similar to a checkbox input element, and we need to check whether it is checked before retrieving its value. Here is an example:

```

Male

Female

```

In this example, we select the radio input elements using the name attribute "gender". Then, we loop through the inputs to check whether they are checked using the checked property. If an input is checked, we retrieve its value using the value property and store it in the genderValue variable.

Retrieving the Value of a Select Input Element

Select input elements are used when users need to choose a single or multiple options from a dropdown list. Retrieving the value of a select input element is slightly different from other input elements.

We can retrieve the selected value of a select input element using the value property of the selected option element. Here is an example:

```

Red

Green

Blue

```

In this example, we select the select input element using its ID "colors". Then, we retrieve the selected option element using the selectedOptions property, which returns an array of selected options. Since we only have one selected option, we can retrieve its value using the value property.

Conclusion

Retrieving the value of an input element is a crucial task for developers today. We have seen the various ways in which we can retrieve the value of different types of input elements using pure JavaScript. By utilizing these techniques, we can make use of user input data to build interactive and dynamic web applications.