当前位置：首页 > jquery

jquery获取input值

2026-02-03 15:44:24jquery

获取 input 元素的值

使用 jQuery 获取 input 元素的值可以通过 val() 方法实现。该方法适用于 <input>、<textarea> 和 <select> 元素。

基本语法

var value = $('selector').val();

通过 ID 获取 input 值

如果 input 元素有唯一的 ID，可以通过 ID 选择器获取其值。

var username = $('#username').val();

通过 class 获取 input 值

如果 input 元素有共同的 class，可以通过 class 选择器获取其值。

var email = $('.email-input').val();

通过属性选择器获取 input 值

可以通过 input 的属性（如 name、type）获取其值。

var password = $('input[name="password"]').val();

获取多个 input 的值

如果需要获取多个 input 的值，可以遍历元素集合。

$('input').each(function() {
    var value = $(this).val();
    console.log(value);
});

表单提交时获取 input 值

在表单提交事件中获取 input 值是一种常见场景。

$('#myForm').submit(function(event) {
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    console.log(username, password);
});

注意事项

val() 方法返回的是字符串类型，如果需要数值类型，需手动转换。
对于复选框（checkbox）或单选按钮（radio），需要使用 :checked 选择器获取选中状态的值。
```
var checkedValue = $('input[name="gender"]:checked').val();
```

示例代码

以下是一个完整的示例，展示如何获取 input 值并在控制台输出。

jquery获取input值

<input type="text" id="username" name="username" value="John Doe">
<input type="password" id="password" name="password" value="123456">
<button id="submit">Submit</button>

<script>
$(document).ready(function() {
    $('#submit').click(function() {
        var username = $('#username').val();
        var password = $('#password').val();
        console.log('Username:', username);
        console.log('Password:', password);
    });
});
</script>