表单元素：文本框、单选、复选、下拉菜单，使用jquery获取输入内容

123_小李

于 2023-06-29 10:19:06 发布

阅读量315

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_65691833/article/details/131451032

版权

使用jQuery获取表单元素的输入内容可以通过以下步骤进行：

1. 首先，确保你已经引入了jQuery库文件。可以通过在HTML文件中添加以下代码来引入：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

2. 在HTML中定义表单元素。例如，一个包含文本框、单选、复选和下拉菜单的表单可以如下所示：
```html
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>

<input type="submit" value="提交">
</form>
```

3. 使用jQuery选择器和事件监听来获取输入内容。可以在JavaScript文件中添加以下代码：
```javascript
$(document).ready(function() {
$("#myForm").submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为

// 获取文本框的值
var name = $("#name").val();

// 获取单选按钮的值
var gender = $("input[name='gender']:checked").val();

// 获取复选框的值
var hobbies = [];
$("input[name='hobbies[]']:checked").each(function() {
hobbies.push($(this).val());
});

// 获取下拉菜单的值
var country = $("#country").val();

// 打印获取到的值
console.log("姓名：" + name);
console.log("性别：" + gender);
console.log("兴趣爱好：" + hobbies.join(", "));
console.log("国家：" + country);
});
});
```

上述代码使用了`$(document).ready()`函数来确保页面加载完成后再执行代码。然后，通过选择器获取相应表单元素的值，并将其打印到控制台。

注意：要使上述代码生效，请确保将jQuery库文件正确引入，并将JavaScript代码放置在可以访问到相关表单元素的位置。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 获取文本框的值
                var name = $("#name").val();

                // 获取单选按钮的值
                var gender = $("input[name='gender']:checked").val();

                // 获取复选框的值
                var hobbies = [];
                $("input[name='hobbies[]']:checked").each(function() {
                    hobbies.push($(this).val());
                });

                // 获取下拉菜单的值
                var country = $("#country").val();

                // 打印获取到的值
                console.log("姓名：" + name);
                console.log("性别：" + gender);
                console.log("兴趣爱好：" + hobbies.join(", "));
                console.log("国家：" + country);
            });
        });
    </script>
</head>

<body>
<form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="male">性别：</label>
    <input type="radio" id="male" name="gender" value="男">男
    <input type="radio" id="female" name="gender" value="女">女<br><br>

    <label for="hobby1">兴趣爱好：</label>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="篮球">篮球
    <input type="checkbox" id="hobby2" name="hobbies[]" value="足球">足球
    <input type="checkbox" id="hobby3" name="hobbies[]" value="游泳">游泳<br><br>

    <label for="country">国家：</label>
    <select id="country">
        <option value="">请选择</option>
        <option value ="中国">中国</option>
        <option value ="美国">美国</option>
        <option value ="日本">日本</option>
        <option value ="韩国">韩国</option>
    </select><br><br>

    <input type="submit" value="提交">
</form>
</body>

</html>

123_小李

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
表单元素：文本框、单选、复选、下拉菜单，使用jquery获取输入内容

input type="checkbox" id="hobby3" name="hobbies[]" value="游泳">游泳<br><br><input type="radio" id="female" name="gender" value="女">女<br><br><input type="radio" id="male" name="gender" value="男">男。2. 在HTML中定义表单元素。console.log("兴趣爱好：" + hobbies.join(", "));
复制链接

扫一扫