javascript jquery对form元素的常见操作详解


Posted in Javascript onJune 12, 2016

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??elect的name//取得下拉?中值
$("#testSelect").val();
//js操作
document.getElementById('objSelect').value=2;
document.all.objSelect.value;

根据option的值选中下拉框

$('#testSelect').val('111');document.all.objSelect.value = objItemValue; //js操作 objSelect??elect的name或者iddocument.getElementById('sel').value=objItemValue;

select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

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;

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元素的常见操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
Javascript变量函数浅析
Sep 02 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 #Javascript
jQuery的each循环用法简单示例
Jun 12 #Javascript
基于jquery插件编写countdown计时器
Jun 12 #Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 #Javascript
You might like
PHP开启opcache提升代码性能
2015/04/26 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python实现备份目录的方法
2015/08/03 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python库安装速度过慢解决方案
2020/07/14 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
某公司.Net方向面试题
2014/04/24 面试题
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
交通法规咨询中心工作职责
2013/11/27 职场文书
好听的队名和口号
2014/06/09 职场文书
总经理检讨书
2014/09/15 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
抗洪救灾标语
2014/10/08 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书