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 相关文章推荐
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
JavaScript实现前端倒计时效果
Feb 09 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结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
PyQt5每天必学之布局管理
2018/04/19 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
奖励申请报告范文
2015/05/15 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis