深山工作室

深山工作室 >

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




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

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

前一页:查询某个字符在字符串中出现的位置数组
后一页:jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析
更多>>HTML相关信息
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
更多>>最新添加
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法