jQuery与JavaScript操作Form表单元素详解
作者:拾光时间:2026-10-31 01:20:43浏览:183
本文详解使用jQuery和原生JavaScript对Form表单元素的常见操作。涵盖下拉框Select的选项增删、取值与选中设置;单选框Radio的状态获取与指定选中;复选框Checkbox的全选逻辑及状态控制;以及Input和Textarea的值获取与样式调整。提供具体代码示例,帮助开发者快速实现表单交互功能。
下拉框 Select 操作详解
1.下拉框 select 的操作:
移除option选项。
$("#ID option").each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
添加option选项。
$("<option value='111'>UPS Ground</option>").appendTo($("#ID"));
获取下拉选单的当前选取值。
//取下拉選中的文本
$('#testSelect option:selected').text();
$("#testSelect").find('option:selected').text();
document.all.objSelect.options[document.all.objSelect.selectedIndex].text; //js操作 objSelect為select的name//取得下拉選中值
$("#testSelect").val();
//js操作
document.getElementById('objSelect').value=2;
document.all.objSelect.value;
根据option的值选中对应的下拉框选项。
$('#testSelect').val('111');document.all.objSelect.value = objItemValue; //js操作 objSelect為select的name或者iddocument.getElementById('sel').value=objItemValue;
设置select下拉框的第二个元素为当前选中值。
$('#select_id')[0].selectedIndex = 1;
单选框 Radio 操作详解
2.单选框 radio 的操作:
$("input[type=radio][checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$(':radio[name="radio"]:checked').val();//第二种方法
$("input[type=radio][value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)
$(':radio[value="2"]').attr('checked','checked');
设置radio单选组的第二个元素为当前选中值。
$("input[name='items']").get(1).checked = true;
复选框 Checkbox 操作详解
3.复选框 checkbox 的操作(其他写法可参考上述radio部分):
$("input[type='checkbox'][checked]").val(); //得到复选框的选中的第一项的值
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);// 打勾
//全選/不選
$("#selectAll").bind('click',function(){
var sa = $(this).attr("checked");
$("input[name='sel[]']").each(function(){
this.checked=sa;
});
});
输入框与文本框操作详解
4.输入框 input 的操作:
$(':input[name="keyword"]').val();//根据name值取得值
5.文本框 textarea 的操作:
固定文本框大小:
<textarea name="123" style="resize:none;"></textarea>
以上关于javascript和jquery对form元素的常见操作详解内容分享完毕,希望能为大家提供参考,感谢支持。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
