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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
thinkphp模板继承实例简述
2014/11/26 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
js获取域名的方法
2015/01/27 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
基层工作经验证明样本
2014/11/16 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS