JavaScript获取输入框的值|极客笔记

JavaScript获取输入框的值

在网页开发中，经常需要获取用户在输入框中输入的值，然后用这些值进行相应的操作。JavaScript是一种强大的脚本语言，可以帮助我们实现这一功能。本文将详细介绍如何使用JavaScript来获取输入框的值。

获取输入框的值

在HTML中，我们可以使用<input>元素来创建输入框，用户可以在输入框中输入文本、数字等内容。我们通过JavaScript来获取输入框的值，一般有两种方法：通过id获取和通过表单获取。

通过id获取输入框的值

首先，我们在HTML中创建一个输入框，并为其设置id属性：

<input type="text" id="inputBox">

然后，在JavaScript中，我们可以通过document.getElementById方法来获取这个输入框的值：

var input = document.getElementById("inputBox").value;

这样，我们就得到了输入框中用户输入的值。下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="inputBox">
    <button onclick="getValue()">Get Value</button>
    <script>
        function getValue() {
            var input = document.getElementById("inputBox").value;
            alert("Input value is: " + input);
        }
    </script>
</body>
</html>

在这个示例中，当点击按钮时，会弹出一个对话框显示输入框中的值。

通过表单获取输入框的值

另一种常用的方法是通过表单来获取输入框的值。我们可以先在HTML中创建一个表单，包含一个输入框和一个提交按钮：

<form id="myForm">
    <input type="text" name="inputBox">
    <input type="submit" value="Submit">
</form>

然后，在JavaScript中，我们可以通过表单的submit事件来获取输入框的值：

document.getElementById("myForm").onsubmit = function() {
    var input = document.getElementById("myForm").elements["inputBox"].value;
    alert("Input value is: " + input);
    return false;  // 防止页面刷新
};

这样，当用户点击提交按钮时，就会弹出一个对话框显示输入框中的值。需要注意的是，为了防止页面刷新，我们在onsubmit事件中返回false。

获取不同类型输入框的值

除了普通的文本输入框外，还有一些其他类型的输入框，比如单选框、复选框、下拉框等，我们也可以通过JavaScript来获取它们的值。

获取单选框的值

单选框一般使用<input type="radio">标签创建。我们可以通过遍历所有单选框，判断哪个被选中来获取其值：

<input type="radio" name="radio" value="option1"> Option 1
<input type="radio" name="radio" value="option2"> Option 2
<input type="radio" name="radio" value="option3"> Option 3

<button onclick="getRadioValue()">Get Radio Value</button>
<script>
    function getRadioValue() {
        var radios = document.getElementsByName("radio");
        var value;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                value = radios[i].value;
            }
        }
        alert("Selected option is: " + value);
    }
</script>

上面的示例中，当点击按钮时，会弹出一个对话框显示被选中的单选框的值。

获取复选框的值

复选框一般使用<input type="checkbox">标签创建。我们可以通过判断复选框是否被选中来获取其值：

<input type="checkbox" name="checkbox" value="option1"> Option 1
<input type="checkbox" name="checkbox" value="option2"> Option 2
<input type="checkbox" name="checkbox" value="option3"> Option 3

<button onclick="getCheckboxValue()">Get Checkbox Value</button>
<script>
    function getCheckboxValue() {
        var checkboxes = document.getElementsByName("checkbox");
        var values = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                values.push(checkboxes[i].value);
            }
        }
        alert("Selected options are: " + values.join(", "));
    }
</script>

当点击按钮时，会弹出一个对话框显示被选中的复选框的值。

获取下拉框的值

下拉框一般使用<select>和<option>标签创建。我们可以通过selectedIndex属性来获取选中项的索引，通过options属性来获取选项的值：

<select id="selectBox">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

<button onclick="getSelectValue()">Get Select Value</button>
<script>
    function getSelectValue() {
        var select = document.getElementById("selectBox");
        var value = select.options[select.selectedIndex].value;
        alert("Selected option is: " + value);
    }
</script>

当点击按钮时，会弹出一个对话框显示选中的下拉框的值。