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 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
js取模(求余数)隔行变色
May 15 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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生成EXCEL的东东
2006/10/09 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
input的focus方法使用
2010/03/13 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python读写unicode文件的方法
2015/07/10 Python
Python中的日期时间处理详解
2016/11/17 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
几道PHP面试题
2013/04/14 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
精彩的广告词
2014/03/19 职场文书
校园广播稿精选
2014/10/01 职场文书
幽默导游词开场白
2015/05/29 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS