jquery-获取input值

最新推荐文章于 2025-06-30 17:07:06 发布
最新推荐文章于 2025-06-30 17:07:06 发布
阅读量117 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html + js + css 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_1865/article/details/82615135
本文详细解析了HTML中各种输入字段与按钮类型的用途、属性和应用实例，帮助开发者更好地理解并运用这些元素。

http://www.cnblogs.com/qinzi/archive/2012/10/25/2738646.html

http://blog.youkuaiyun.com/longyulu/article/details/32343659

http://www.cnblogs.com/myfjd/archive/2011/11/25/2263702.html

http://www.cnblogs.com/windy224/archive/2011/08/23/2150187.html

语法

<input type="value">

属性值

值描述
button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox定义复选框。
file定义输入字段和 "浏览"按钮，供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
前端 -- 基础 表单标签 - input type属性（按钮篇- submit,reset,button,file）
三毛与海子的博客
04-03 1760
Submit reset button file
HTML 四十二 输入属性
W_H_M_2018的博客
09-15 457
HTML Input 属性 value 属性 value属性规定输入字段的初始值： <form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form> readonly 属性 rea.
input的属性值
无病呻吟
07-25 555
语法属性值值描述button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。checkbox定义复选框。file定义输入字段和 "浏览"按钮，供文件上传。hidden定义隐藏的输入字段。image定义图像形式的提交按钮。password定义密码字段。该字段中的字符被掩码。radio定义单选按钮。reset定义重置按钮。重置按钮会清除表单中的所有数据。submit定义提交按钮。提交按钮会把表单数据发送到服务器。text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
HTML input属性
weixin_30635053的博客
08-08 87
input标签是单独出现的,<input />属性.Common -- 一般属性type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)value -- 输入域的值size -- 输入域的长度maxlength -- 输入域最多可以输入文字的长度checked -- 如果是选择型的输入域,代表已经被选择readonly -- 输入域可以选择,但是无法修改disabled ...
前端必知必会-html表单的input属性
qq_24018193的博客
08-02 1534
本文介绍了的html表单的input属性，如有问题欢迎私信和评论。
jquery获取input输入框中的值
12-13
如何用javascript获取...一、jquery获取input文本框中的值 通过 name var name = $('input[name="CN_NAME"]').val(); 通过 id var name = $('#CN_NAME').val(); 通过 class var name = $('.CN_NAME').val(); 二、jav
jQuery获取及设置表单input各种类型值的方法小结
10-22
本文对jQuery获取及设置表单input各种类型值的方法进行了详细的小结。首先，对于radio类型输入框，可以通过使用jQuery选择器获取被选中项的值，例如使用$("input[@name=items]:checked").val();可取得一组具有相同...
jQuery获取多种input值的简单实现方法
10-22
### jQuery获取input值的知识点 #### 1. 获取radio值 - **判断radio是否被选中**：要获取radio的值，首先需要判断该radio是否被选中。可以使用`.attr('checked')`方法，该方法会返回'checked'属性的值，如果该...
jquery获取form表单input元素值的简单实例
10-22
接着，文章中还提到了使用纯JavaScript的getElementById()方法获取input元素的值。这是原生JavaScript提供的一个方法，可以用来获取指定id的DOM元素，然后通过.value属性来获取其值。例如，document.getElementById...
HTML标签的type属性
66
03-30 2860
被input的type的imge属性迷惑啦上W3SCHOOL查查原来这样子的^-^ 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等属性值:值描述button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。checkbox 
HTML <input> 标签的 type 属性
AYNGPENG的博客
04-19 857
http://www.w3school.com.cn/tags/att_input_type.asp
html input标签的属性有哪些？input标签的用法总结（附实例）
web前端入门基础进阶教程-htmlcssjs
06-22 1万+
首先先来说说html input标签的属性： 1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。具体它有那些值，我们后面再讨论。 2.required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。 3.patt
html表单input六种属性以及演示
2301_77264434的博客
09-16 847
【代码】html表单input六种属性以及演示。
HTML＜input＞元素详解
最新发布
empti_
06-30 1249
是 HTML 表单中最核心的元素，用于创建各种交互式控件来接收用户输入。 二、主要输入类型 1. 文本输入 2. 选择输入 3. 特殊输入类型 三、重要属性 属性 描述 示例 表单字段名称（必填） 默认值 输入提示 必填字段 只读 禁用 最大字符数 / 数值范围 数值步长 正则验证 自动完成 自动聚焦 四、表单验证示例 五、现代输入类型 (HTML5) 六、最佳实践 始终使用
Input属性详解
热门推荐
qq_48621951的博客
07-29 1万+
注意radio（单选框）需要value值相等才可以实现单选的功能，value值可以随意设。（1）当inputtype=“text”、“password”、"hidden"时，定义输入字段的初始值；（2）当inputtype=“button”、“reset”、"submit"时，定义按钮上的显示的文本；（3）当inputtype=“checkbox”、“radio”、"image"时，定义与输入相关联的值；1.name属性元素的名称，也就是name的值代表当前input元素的名字；...
HTML5之input标签的新type属性
阅读之后，对你有帮助，那就点个赞再走吧
04-15 3158
新type属性介绍 首先让我们来看一张表 HTML5中的type.png 其中标有`红色5`的代表`HTML5`中推出的 测试代码: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>...
Input的属性值
ZhaojunWang的博客
05-23 1668
Input一般配合label使用 name属性是规定input元素的名称，还有用于提交到服务器后的表单数据进行标识，以及在客户端通过JS引用表单数据。 TEXT text是最常用的一个属性值，这是定义单行文本的，默认宽度是20个字符，要是需要写多行文本用textarea。 PASSWORD password定义密码，是掩码。 显示出来是这样，就是我们平时输入密码的状态 BUTTON but...
html中input属性设置（合集）
2301_78256053的博客
07-04 8763
2. 精通各种web前端技术和标准，包括但不限于Javascript/ES6、HTML/HTML5、CSS/CSS3、Sass/less、Vue/React/Node，对表现与数据分离、web协议、web安全、web性能、web语义化等有深刻理解;③找到刚才保存的“Html”单击打开，再单击“导入”，在弹出的“导入数据”窗口中你可以选择“现有工作表”、“新建工作表”都行，然后单击确定即可。我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。
input的属性
weixin_52334984的博客
05-18 1489
一.input主要使用的属性有4个 ①type 其值域为（text password radio CheckBox submit reset file） ②name 值域自定义 ③value 值域自定义 ④checked 值域checked 二.值的作用 ①type的 text值可以给予表单元素20个可输入的位置。 password可以对表单元素的输入内容进行加密。 radio可以形成一个按钮，通常是单选的。 CheckBox多选框框。 submit传递数据到后台 reset重置所写
jquery获取input的值显示undefined
04-01
<think>嗯，用户遇到了使用jQuery获取input值却显示undefined的问题。我需要先分析可能的原因，然后一步步引导用户排查。 首先，最常见的可能性是选择器没有正确选中目标元素。用户可能用了ID选择器，但元素实际没有对应的ID，或者ID拼写错误。这时候应该检查HTML中的元素ID是否匹配，并确保在jQuery中使用#符号来选取ID。 其次，用户可能在DOM加载完成前执行了jQuery代码，导致元素未被找到。这种情况下，需要将代码包裹在$(document).ready()或简写的$(function() {})中，确保代码在DOM就绪后执行。 另外，用户可能混淆了DOM对象和jQuery对象。比如直接使用val()方法在原生DOM元素上，这会导致错误。应该确认通过jQuery选择器获取的是jQuery对象，而不是原生的。 还有可能是表单元素的值确实未正确设置。例如，用户可能在获取值之前没有输入内容，或者元素是动态生成的，此时需要事件委托或确保在值存在后再获取。 最后，浏览器缓存或jQuery未正确引入也可能导致问题。检查开发者工具的控制台是否有错误，确认jQuery库已正确加载，并且没有与其他库冲突。 总结下来，应该建议用户按照步骤检查选择器、执行时机、对象类型、元素状态以及环境配置等方面，逐步排除问题。</think>以下是通过jQuery获取input值出现`undefined`的常见原因及解决方案： 🔍 逐步排查步骤： 1️⃣ **检查元素选择器是否正确** ```html <!-- 正确示例 --> <input type="text" id="username" value="test"> ``` ```javascript // 错误写法（缺少#号选择器） console.log($("username").val()); // undefined // 正确写法 console.log($("#username").val()); // "test" ``` *❗ 注意：确保选择器语法正确，ID选择器前必须加`#`* 2️⃣ **检查DOM加载时机** ```javascript // 错误写法（代码在DOM加载前执行） <script> console.log($("#username").val()); // undefined </script> <body> <input type="text" id="username"> </body> // 正确写法：使用ready事件 $(document).ready(function() { console.log($("#username").val()); }); ``` 3️⃣ **验证对象类型** ```javascript // 错误写法（混淆DOM对象） var domElement = document.getElementById("username"); console.log(domElement.val()); // 报错 // 正确写法：转换为jQuery对象 console.log($(domElement).val()); ``` 4️⃣ **检查元素类型和状态** ```html <!-- 特殊元素示例 --> <input type="checkbox" id="agree" checked> ``` ```javascript // 复选框需要用prop() console.log($("#agree").val()); // 返回"on"（可能不是预期结果） console.log($("#agree").prop("checked")); // 返回true ``` 5️⃣ **动态元素处理** ```javascript // 动态生成的元素需要事件委托 $(document).on("input", ".dynamic-input", function() { console.log($(this).val()); }); ``` 💡 补充建议： - 使用浏览器开发者工具检查元素（F12） - 在控制台直接测试选择器：`$("#yourInput")` - 检查jQuery是否正常加载：`console.log(jQuery.fn.jquery)` - 确保没有重复ID的元素 通过以上步骤排查，通常可以解决99%的取值显示undefined问题。如果仍存在问题，建议提供具体的HTML结构和JavaScript代码片段以便进一步分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值