jQuery获取多种input值的简单实现方法


Posted in Javascript onJune 20, 2016

获取input的checked值是否为true:

第一种:

if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 --注:name即控件name属性,value即控件value属性

第二种:

可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式:

if($("input[name=row_checkbox]").attr('checked')==true)

第三种:

if($("[name=row_checkbox]").attr('checked')==true) --注:name即控件name属性

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关文章分类:Web前端:

radio:

获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); --注:name即控件name属性

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");

radio设置value=2的元素为当前选中项:$("input[type=radio]").attr("checked",'2′);

radio被选中项的value值:$("input[name='radio_name'][checked]").val();

根据Value值设置Radio为选中状态:$("input[name='radio_name'][value='要选中Radio的Value值'").attr("checked",true);

select:

获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text();

或 var item = $("select[name=items]").find("option:selected").text();

select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; --注:select_id'即控件的id属性

select下拉框value = 'val'的元素为当前选中项:$("select[name=items] option[value='val']").attr("selected","selected");

select设置value=-sel3的项目为当前选中项:$("#sel").attr("value",'-sel3′); --注:sel即select控件的id属性

添加下拉框的option:$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel");

select清空:$("#sel").empty();

checkbox:

checkbox的第二个元素被打勾:$("input[name=items]").get(1).checked = true; //打勾

checkbox的value='val'的元素打勾:$("input[name=item][value='val']").attr("checked",true);

或$("input[name=item][value='val']").attr("checked","checked");

判断checkbox是否已经打勾:if($("input[name=item][value='val']").attr('checked')==true)

jQuery获取CheckBox选择的Value值:

//选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合

$($("input[name='checkbox_name'][checked]")).each(function(){

arrChk+=this.value + ','; //遍历被选中CheckBox元素的集合 得到Value值

});

checkbox的checked属性:

$("#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"));

--注:根据控件checkbox_id的checked状态为name='checkbox_name'的input赋相同的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′); //填充内容

事件:

当对象text_id获取焦点时触发:$("#text_id").focus(function(){//code...});

当对象text_id失去焦点时触发:$("#text_id").blur(function(){//code...});

其他:

使文本框的Vlaue值成选中状态:$("#text_id").select();

$("#text_id").val().split(","); //将Text的Value值以','分隔返回一个数组

以上这篇jQuery获取多种input值的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
AngularJs Javascript MVC 框架
Jun 20 #Javascript
You might like
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
Vuex简单入门
2017/04/19 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
Vue-Router模式和钩子的用法
2018/02/28 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python函数与方法的区别总结
2019/06/23 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
学生个人自我鉴定
2014/03/26 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏