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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
javascript版2048小游戏
Mar 18 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP中用hash实现的数组
2011/07/17 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
jquery JSON的解析方式
2009/07/25 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
重命名批处理python脚本
2013/04/05 Python
python requests 使用快速入门
2017/08/31 Python
Python转换时间的图文方法
2019/07/01 Python
python nmap实现端口扫描器教程
2020/05/28 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
幼儿园教师国培感言
2014/02/02 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
2016年清明节寄语
2015/12/04 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
centos7安装mysql5.7经验记录
2022/05/02 Servers