jQuery操作input值的全面指南
版权申诉
59 浏览量
更新于2024-09-12
收藏 40KB PDF 举报
本文主要介绍了使用jQuery操作HTML中input元素值的各种方法,包括获取和设置文本框、文本区域、多选框、单选组以及下拉框的值,并提供了具体的代码示例。
在jQuery中,操作input元素的值非常方便。以下是一些常见的操作方法:
1. 获取选中的值
- 对于`radio`按钮,可以使用以下代码获取被选中的值:
```javascript
var item = $('input[@name=items][@checked]').val();
```
- 对于`select`下拉框,获取选中项的文本可以这样写:
```javascript
var item = $('select[@name=items] option[@selected]').text();
```
2. 设置选中的值
- 如果想让`select`下拉框的第二个选项成为选中值,可以执行:
```javascript
$('#select_id')[0].selectedIndex = 1;
```
- 对于`radio`单选组,使第二个元素被选中,可以使用:
```javascript
$('input[@name=items]').get(1).checked = true;
```
3. 获取不同类型的input值
- 获取文本框或文本区域的值:
```javascript
var value = $('#txt').attr('value');
// 或
var value = $('#txt').val();
```
- 对于`checkbox`多选框,获取其值:
```javascript
var checkboxValue = $('#checkbox_id').attr('value');
```
- 对于`radio`单选组,获取被选中项的值:
```javascript
var radioValue = $('input[@type=radio][@checked]').val();
```
- 对于`select`下拉框,获取当前选中项的值:
```javascript
var selectValue = $('#sel').val();
```
4. 设置不同类型的input值
- 清空或设置文本框或文本区域的值:
```javascript
$('#txt').attr('value', ''); // 清空
$('#txt').attr('value', '11'); // 设置为'11'
```
- 对于`checkbox`,切换其选中状态:
```javascript
$('#chk1').attr('checked', ''); // 不打勾
$('#chk2').attr('checked', true); // 打勾
```
- 判断`checkbox`是否已被选中:
```javascript
if ($('#chk1').attr('checked') === undefined) // 判断是否已打勾
```
- 设置`radio`单选组的选中项:
```javascript
$('input[@type=radio]').attr('checked', '2'); // 设置value=2的项目为当前选中项
```
- 设置`select`下拉框的选中项:
```javascript
$('#sel').attr('value', '-sel3'); // 设置value=-sel3的项目为当前选中项
```
- 添加新的`option`到`select`下拉框:
```javascript
$('<option value="1">1111</option><option value="2">2222</option>').appendTo('#sel');
```
这些方法使得在JavaScript中操作HTML表单元素变得更加简单和直观。通过jQuery,开发者能够快速地获取或设置input元素的值,从而实现丰富的交互功能。在实际开发中,可以根据需求灵活运用这些方法来实现表单数据的读取和修改。
2020-11-23 上传
2021-01-21 上传
2020-10-20 上传
2020-10-22 上传
2020-10-16 上传
点击了解资源详情
2020-10-16 上传
2020-10-22 上传
2020-10-29 上传
weixin_38522029
- 粉丝: 4
- 资源: 880
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析:酒店管理系统快速开发指南
- 构建可解析文本框:.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋:从游戏到复刻
- WordPress文档嵌入插件:无需浏览器插件即可上传和显示文档
- Android开源项目精选:优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅:横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器:高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录