jQuery操作input值的全面指南

版权申诉
0 下载量 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元素的值,从而实现丰富的交互功能。在实际开发中,可以根据需求灵活运用这些方法来实现表单数据的读取和修改。