用jQuery擷取表單的值

標籤：

在日常開發過程中，有許多用到表單的地方。比如登入，註冊，比如支付，填寫訂單，比如後台管理等等。

使用jQuery來擷取表單的值是比較常見的做法。

常見表單

單行文字域：<input type=‘text‘>

<input type="text" id=‘name‘ value=‘pelli‘>

密碼域：<input type=‘password‘>

<input type="password" id=‘pass‘ value=‘password‘>

單選：<input type=‘radio‘  name=‘sex‘>男 <input type=‘radio‘ name=‘sex‘>女

<input type="radio" name=‘sex‘ id=‘man‘ value="1"><label for="man">男</label><input type="radio" name=‘sex‘ id=‘woman‘ value="0"><label for="woman">女</label>

多選：　

　　　<input type=‘checkbox‘ value=‘1‘ name=‘intrest‘>籃球

　　　<input type=‘checkbox‘ value=‘2‘ name=‘intrest‘>足球

　　　<input type=‘checkbox‘ value=‘3‘ name=‘intrest‘>皮球

<input type="checkbox" value=‘1‘ name=‘intrest‘ id=‘ball1‘><label for="ball1">籃球</label><input type="checkbox" value=‘2‘ name=‘intrest‘ id=‘ball2‘><label for="ball2">羽毛球</label><input type="checkbox" value=‘3‘ name=‘intrest‘ id=‘ball3‘><label for="ball3">手球</label><input type="checkbox" value=‘4‘ name=‘intrest‘ id=‘ball4‘><label for="ball4">乒乓球</label><input type="checkbox" value=‘5‘ name=‘intrest‘ id=‘ball5‘><label for="ball5">足球</label>

下拉式清單：

　　<select id=‘drop‘>

　　　　<option value=‘1‘>昨天</option>

　　　　<option value=‘2‘>今天</option>

　　　　<option value=‘3‘>明天</option>

　　</select>

<select name="city" id="city">    <option value="1">北京</option>    <option value="2">南京</option>    <option value="3">上海</option>    <option value="4">成都</option>    <option value="5">西安</option></select>

多行文字域：

　　<textarea>這裡可以寫多行文字</textarea>

<textarea name="" id="remark" cols="30" rows="10">這裡是備忘</textarea>

 

用jQuery擷取值

// 暱稱var name = $("#name").val();console.log(name);// 密碼var pass = $("#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 = $("#city").val();console.log(city);// 城市var city1 = $("#city option:selected").val();console.log(city1);// 備忘var remark = $("#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;}

 

總結：

單行文字：$("#text").val();

密碼：$("#pass").val();

單選：$("input:radio:checked").val();

多選：遍曆 $("input:checkbox"),判斷是否選中

下拉：$("#select").val();

　　　或者

　　　$("#select option:select").val();

多行文字：$("textarea").val();

用jQuery擷取表單的值