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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript数组的使用
Mar 28 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
Javascript实现字数统计
Jul 03 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
详解vue组件基础
May 04 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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的中问验证码
2006/11/25 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Javascript window对象详解
2014/11/12 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python实现单词拼写检查
2015/04/25 Python
python生成验证码图片代码分享
2016/01/28 Python
python实现逻辑回归的方法示例
2017/05/02 Python
tornado 多进程模式解析
2018/01/15 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
通过实例学习Python Excel操作
2020/01/06 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
田径运动会开幕式及主持词
2014/03/28 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
学风建设演讲稿
2014/09/12 职场文书
签订劳动合同通知书
2015/04/16 职场文书
给校长的建议书范文
2015/09/14 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle