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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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 list()函数的详解
2013/06/05 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
div模拟选择框示例代码
2013/11/03 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Django跨域请求问题的解决方法示例
2018/06/16 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
xxx同志考察材料
2014/02/07 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
师德建设实施方案
2014/03/21 职场文书
新年晚会主持词
2014/03/24 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
诚信贷款承诺书
2014/05/30 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
httpclient调用远程接口的方法
2022/08/14 Java/Android