jquery 获取表单元素里面的值示例代码


Posted in Javascript onJuly 28, 2013

jquery 笔记:

$(“input[name='radio_name']:checked”).val() 
<input type="radio" value="1" name="radio_name" />1 
<input type="radio" value="2" name="radio_name" />2 
<input type="radio" value="3" name="radio_name" />3

网上的东西太乱了,而且jQuery不同版本可能写法不太一样,经过搜索和做实验,下面写的是jQuery 1.3.2版本下的
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置:
获取一组radio被选中项的值:var item = $('input[name=items][checked]‘).val();

获取select被选中项的文本
var item = $(”select[@name=items] option[@selected]“).text();
获取select被选中项的文本 :var item = $(”select[name=items] option[selected]“).text(); 或
$(”select[name=items]“).find(”option:selected”).text();
select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;
select下拉框value = ‘val'的元素为当前选中项:$(”select[name=items] option[value='val']“).attr(”selected”,”selected”);
radio单选组的第二个元素为当前选中项 :$('input[@name=items]‘).get(1).checked = true; 或$('input[name=items]‘).attr(”checked”,1′);
radio的value = ‘val'的元素为当前选中项:$('input[name=items][value='val']‘).attr(”checked”,”checked”);
获取值:
文本框,文本区域:$(”#txt”).attr(”value”);
多选框checkbox:$(”input[name='checkbox':checked]“).each(function(){
var val = $(this).val();
});
单选组radio: $(”input[type=radio][checked]“).val();
下拉框select的value值: $('select').val();
下拉框select选中的text值:$(”select”).find(”option:selected”).text();

控制表单元素:
文本框,文本区域:$(”#txt”).attr(”value”,”); //清空内容
$(”#txt”).attr(”value”,'11′); //填充内容
多选框checkbox:
checkbox的第二个元素被打勾:$(”input[name=items]“).get(1).checked = true; //打勾
$(”input[name=items]“).get(1).checked = false; //不打勾
checkbox的value='val'的元素前打勾:$(”input[name=item][value='val']“).attr(”checked”,true);或$(”input[name=item][value='val']“).attr(”checked”,”checked”);
if($(”input[name=item][value='val']“).attr('checked')==true) //判断是否已经打勾
单选组radio: $(”input[type=radio]“).attr(”checked”,'2′);//设置value=2的项目为当前选中项
下拉框select: $(”#sel”).attr(”value”,'-sel3′);//设置value=-sel3的项目为当前选中项
$(”<option value='1′>1111</option><option value='2′>2222</option>”).appendTo(”#sel”)//添加下拉框的option
$(”#sel”).empty();//清空下拉框

jQuery获取Radio选择的Value值
代码$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值
$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发
$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发
$("#text_id").select(); //使文本框的Vlaue值成选中状态
$("input[name='radio_name'][value='要选中Radio的Value值'").
attr("checked",true); //根据Value值设置Radio为选中状态

jQuery获取CheckBox选择的Value值
$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合
$($("input[name='checkbox_name'][checked]")).
each(function(){arrChk+=this.value +',';});//遍历被选中CheckBox元素的集合 得到Value值
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
$("input[name='checkbox_name']").attr
("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思
$("#text_id").val().split(","); //将Text的Value值以','分隔 返回一个数组
上面的这些操作,其实就是jQuery选择器的使用,希望大家对jQuery选择器方面的知识要掌握扎实。

Javascript 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
Javascript Object.extend
May 18 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 #Javascript
alert中断settimeout计时功能
Jul 26 #Javascript
JS清除IE浏览器缓存的方法
Jul 26 #Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 #Javascript
js监听键盘事件示例代码
Jul 26 #Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 #Javascript
固定表格行列(expression)在IE下适用
Jul 25 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python中is与==判断的区别
2017/03/28 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
TensorFlow实现Logistic回归
2018/09/07 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
实习自我评价怎么写
2013/12/02 职场文书
财务主管自我鉴定
2014/01/17 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
大学军训决心书
2015/02/05 职场文书
会议主持词开场白
2015/05/28 职场文书
预备党员党支部意见
2015/06/02 职场文书
灵魂歌王观后感
2015/06/17 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery