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

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

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




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

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

相关阅读
Word图片导出方法
网站改进中
微信公众号用户关注时自动推送回复小程序卡片(图文卡片)不需要第三方平台就可以做
Dreamweaver在onLoad运行_onOpen.htm时,发生了以下javascript错误
javascript表格内移动上下列,可以做成ajax加上动态程序做成上下移动顺序
CSS教程:弄懂闭合浮动元素
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
javascript实现图片预览功能
共有0条关于《jquery获取不同类型表单值的方式》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
更多>>同类信息
iframe里阻止_blank弹出新窗口的方法
jquery实现下拉加载更多
jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析
jquery获取不同类型表单值的方式
查询某个字符在字符串中出现的位置数组
正则的常表达式
更多>>最新添加文章
阿里云短信验证码签名不合法isv.SMS_SIGNATURE_ILLEGAL
iis点开后任务栏上有显示,但是窗口看不到的解决办法
facebook广告推广设定像素标准事件的值和币种等说明
iframe里阻止_blank弹出新窗口的方法
jquery实现下拉加载更多
静态网站利用微信URL Scheme生成的ticket从浏览器h5跳到微信小程序完整代码
RSA加密解密插件
微软Encoder加密解密函数
更多>>随机抽取信息
用css做的英文首字母大写和英文全都大写通过各个浏览器
CSS编写过程中常见的10个错误以及解决方法
绵阳市康辉国际旅行社有限责任公司
连云港天天美食网
fiddler抓包在内容的SyntaxView窗口里面是乱码
旅行社网站模板3