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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
微信小程序实现左右列表联动
May 19 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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中的Cannot modify header information 问题
2013/08/12 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
php四种定界符详解
2017/02/16 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
DOM 基本方法
2009/07/18 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python实现批量修改文件名实例
2015/07/08 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python操作gitlab API过程解析
2019/12/27 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
农村婚礼证婚词
2014/01/10 职场文书
环境保护标语
2014/06/20 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers