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 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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类
2006/11/25 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
Node.js简单入门前传
2017/08/21 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
Python中对列表排序实例
2015/01/04 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
销售部主管岗位职责
2013/12/18 职场文书
化学教师教学反思
2014/01/17 职场文书
培训协议书范本
2014/04/22 职场文书
法人委托书的范本格式
2014/09/11 职场文书
学习保证书
2015/01/17 职场文书
客户付款通知书
2015/04/23 职场文书
心灵捕手观后感
2015/06/02 职场文书
环保证明
2015/06/23 职场文书
2017新年晚会开幕词
2016/03/03 职场文书