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 研究心得 取得属性的值
Nov 30 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue实现百度语音合成的实例讲解
Oct 14 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python求crc32值的方法
2014/10/05 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python实现打砖块游戏
2020/02/25 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
重构Python代码的六个实例
2020/11/25 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
升职演讲稿范文
2014/05/23 职场文书
国际贸易专业求职信
2014/06/04 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
微信小程序调用python模型
2022/04/21 Python