订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery获取不同类型表单值的方式

2022/2/22 15:45:03 字体: 浏览 764




在日常开发过程中,有许多用到表单的地方。比如登录,注册,比如支付,填写订单,比如后台管理等等。

jquer获取不同类型表单值的常见方法。


常见表单
单行文字域:<input type="text" id='qwbm_text' value='这个单行文本'>
密码域:<input type="password" id='qwbm_pass' value='这个是密码内容'>
单选:
<label for="qwbm_sex1"><input type="radio" name='qwbm_sex' id='qwbm_sex1' value="1">男</label>
<label for="qwbm_sex2"><input type="radio" name='qwbm_sex' id='qwbm_sex2' value="2">女</label>
多选:
<label for="q_duoxuan1"><input type="checkbox" value='1' name='q_duoxuan' id='q_duoxuan1'>篮球</label>
<label for="q_duoxuan2"><input type="checkbox" value='2' name='q_duoxuan' id='q_duoxuan2'>羽毛球</label>
<label for="q_duoxuan3"><input type="checkbox" value='3' name='q_duoxuan' id='q_duoxuan3'>手球</label>
<label for="q_duoxuan4"><input type="checkbox" value='4' name='q_duoxuan' id='q_duoxuan4'>乒乓球</label>
<label for="q_duoxuan5"><input type="checkbox" value='5' name='q_duoxuan' id='q_duoxuan5'>足球</label>
下拉列表:
<select name="q_city" id="q_city">
<option value="1">做网站</option>
<option value="2">做小程序</option>
<option value="3">做公众号</option>
<option value="4">做全栈</option>
</select>
多行文字域:
<textarea name="" id="q_remark" cols="30" rows="10">这里是备注</textarea>

用jQuery获取对应表单类型的值

//昵称
var name = $("#qwbm_text").val();
console.log(name);

// 密码
var pass = $("#qwbm_pass").val();
console.log(pass);

// 性别
var sex = $("input:radio:checked").val();
console.log(sex);

// 性别
var sex1 = checkAll($("input:radio"));
console.log(sex1);

// 兴趣
var hobby = checkAll($("input:checkbox"));
console.log(hobby);

// 业务
var city = $("#q_city").val();
console.log(city);

// 业务
var city1 = $("#q_city option:selected").val();
console.log(city1);

// 备注
var remark = $("#q_remark").val();
console.log(remark);
复制代码
一个可以获取单选和多选的函数,返回值得数组

//获取单选或者多选的值,返回一个值得数组,如果没有值,返回空数组,参数inputlist是jQuery对象
function checkAll(inputlist){
    var arr = [];
    var num = inputlist.length;
    for(var i = 0; i < num; i++){
        if(inputlist.eq(i).is(":checked")){
            arr.push(inputlist.eq(i).val());
        }
    }
    return arr;
}


总结:
单行文字:$("#qwbm_text").val();
密码:$("#qwbm_pass").val();
单选:$("input:radio:checked").val();
多选:遍历 $("input:checkbox"),判断是否选中
下拉:$("#q_city").val();
   或者
   $("#q_city option:select").val();
多行文字:$("q_remark").val();

相关阅读
ASP FSO读取XX文件夹下的所有文件列表
HTML文档中meta标签的作用
理解css里的!important是什么意思?
纯div+css制作的弹出菜单-01
查询某个字符在字符串中出现的位置数组
ASP 格式化显示时间为几个月,几天前,几小时前,几分钟前,或几秒前
javascript时间显示01
连云港旅游网
共有0条关于《jquery获取不同类型表单值的方式》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
jquery中动态生成的代码使用on hover事件时不出现效果
iframe里阻止_blank弹出新窗口的方法
jquery实现下拉加载更多
jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
aliyun阿里云续费域名优惠口令(注册、续费都可以使用)
windows7环境下安装配置jdk
python对微信操作要用到这两个库wxpy与itchat
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
更多>>随机抽取信息
asp正则表达式 替换HTML源文件里的链接地址
张掖春秋国际旅行社有限公司
ASP.NET常用的三十三种实用代码(中)
利用ASP正则提取文章里面的图片的有效的src地址
ASP.NET 2.0跨网页提交的三法
2012-3-22中午的一件电话事件(一个不懂怎么定义的电话)(备份)