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判断函数
Aug 14 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
vue如何从接口请求数据
Jun 22 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 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
是否存在第一台收音机的说法
2021/03/01 无线电
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
手把手教你python实现SVM算法
2017/12/27 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python进行文件对比的方法
2018/12/24 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
车间班组长岗位职责
2013/11/13 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书