在日常開(kāi)發(fā)過(guò)程中，有許多用到表單的地方。比如登錄，注冊(cè)，比如支付，填寫(xiě)訂單，比如后臺(tái)管理等等。

jquer獲取不同類(lèi)型表單值的常見(jiàn)方法。


常見(jiàn)表單
單行文字域：<input type="text" id='qwbm_text' value='這個(gè)單行文本'>
密碼域：<input type="password" id='qwbm_pass' value='這個(gè)是密碼內(nèi)容'>
單選：
<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">做網(wǎng)站</option>
<option value="2">做小程序</option>
<option value="3">做公眾號(hào)</option>
<option value="4">做全棧</option>
</select>
多行文字域：
<textarea name="" id="q_remark" cols="30" rows="10">這里是備注</textarea>

用jQuery獲取對(duì)應(yīng)表單類(lèi)型的值

//昵稱
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);

// 業(yè)務(wù)
var city = $("#q_city").val();
console.log(city);

// 業(yè)務(wù)
var city1 = $("#q_city option:selected").val();
console.log(city1);

// 備注
var remark = $("#q_remark").val();
console.log(remark);
復(fù)制代碼
一個(gè)可以獲取單選和多選的函數(shù)，返回值得數(shù)組

//獲取單選或者多選的值，返回一個(gè)值得數(shù)組，如果沒(méi)有值，返回空數(shù)組，參數(shù)inputlist是jQuery對(duì)象
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;
}


總結(jié)：
單行文字：$("#qwbm_text").val();
密碼：$("#qwbm_pass").val();
單選：$("input:radio:checked").val();
多選：遍歷 $("input:checkbox"),判斷是否選中
下拉：$("#q_city").val();
　　　或者
　　　$("#q_city option:select").val();
多行文字：$("q_remark").val();