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 10件让人费解的事情
Feb 15 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
express框架下使用session的方法
Jul 31 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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文件上传类
2016/08/29 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
django 使用全局搜索功能的实例详解
2019/07/18 Python
浅析Python 条件控制语句
2020/07/15 Python
如何利用python读取micaps文件详解
2020/10/18 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
初三开学计划书
2014/04/27 职场文书
药剂专业自荐书
2014/06/20 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
JavaScript组合继承详解
2021/11/07 Javascript