js获取input标签的输入值实现代码

JS获取input标签的输入值实现代码

在前端开发中，我们常常需要获取页面上输入框（input）的值，并使用该值来进行一些操作。本文将介绍如何在JavaScript中获取input标签的输入值，并提供两个示例说明。

1. 标准的input输入框

要获取标准的input输入框（即type为text、password、email等类型的输入框）的值，我们可以使用以下代码：

var inputVal = document.getElementById('input-id').value;

其中，'input-id'是输入框的id属性值，inputVal即为输入框的值。我们可以将这个代码段放在事件处理函数中，比如在点击按钮时获取输入框的值：

<input type="text" id="input-id">
<button onclick="getValue()">获取输入框的值</button>

<script>
    function getValue() {
        var inputVal = document.getElementById('input-id').value;
        alert('输入框的值为：' + inputVal);
    }
</script>

上述代码中，input标签的id属性值为'input-id'，按钮的onclick属性值为'getValue()'。当点击按钮时，会触发getValue()函数，并用其中的代码来获取输入框的值。

2. 单选框和复选框

对于单选框和复选框，我们需要特殊处理才能获取到其值。这是因为单选框和复选框在HTML中是属于同一个name属性的一组，需要使用特殊的方法来进行获取。以下是获取单选框和复选框的值的示例代码：

<label>
    <input type="radio" name="sex" value="male">男
</label>
<label>
    <input type="radio" name="sex" value="female">女
</label>
<label>
    <input type="checkbox" name="hobby" value="reading">阅读
</label>
<label>
    <input type="checkbox" name="hobby" value="music">音乐
</label>
<button onclick="getValue()">获取输入框的值</button>

<script>
    function getValue() {
        var sex = document.querySelector('input[name="sex"]:checked').value;
        var hobby = Array.from(document.querySelectorAll('input[name="hobby"]:checked')).map(item => item.value);

        alert('性别为：' + sex + '，爱好为：' + hobby.toString());
    }
</script>

上述代码中，我们首先给每个单选框和复选框分别定义了name属性，然后在JS中使用querySelector和querySelectorAll来进行选择器的选择。使用querySelector来获取单选框的值时，我们需要使用:checked伪类来获取被选中的选项，再使用.value获取其value属性。而对于复选框，我们需要使用querySelectorAll来获取所有被选中的选项，再使用map方法将其value属性构成数组输出。

小结

本文介绍了如何在JavaScript中获取input标签的各类输入值，包括标准的输入框和单选框、复选框。如果您有其他问题或建议，请在评论区留言。