在日常开发过程中,有许多用到表单的地方。比如登录,注册,比如支付,填写订单,比如后台管理等等。
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();