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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JS实现瀑布流效果
Mar 07 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初学者头疼十四条问题大总结
2008/11/12 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
Javascript中String的常用方法实例分析
2015/06/13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
python fabric实现远程操作和部署示例
2014/03/25 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python 实现A*算法的示例代码
2018/08/13 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
经贸日语专业个人求职信
2013/12/13 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
婚礼主持词开场白
2014/03/13 职场文书
公司开业庆典主持词
2014/03/21 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
MySQL 条件查询的常用操作
2022/04/28 MySQL