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

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

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




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

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();

相关阅读
ewebeditor 删除信息时同时删除相关上传文件
asp判断是否是手机访问
ASP网站打开特别卡 提示:msxml3.dll 错误 '80072ee2' /LM/W3SVC/670931603/Root/global.asa解决办法
CSS Alpha透明代码相关知识学习
旅行社手机网站模板3
深山旅行社管理系统 v1.8
网站内容中某个关键字相关右键菜单
性感的CSS菜单(Menus)
共有0条关于《jquery获取不同类型表单值的方式》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
jquery中动态生成的代码使用on hover事件时不出现效果
更多>>最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>随机抽取信息
nyfreetour.com
耒阳华天国际旅行社
你们这个系统太专业,很复杂?
微信公众平台
初期入门地接旅行社建站解决方案
让你的Pycharm和电脑pip install下载速度飞起来