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();
- 相關閱讀
- asp計算頁面執行時間顯示到毫秒
- 四川省中國青年旅行社有限公司高新分社
- javascript表格內移動上下列,可以做成ajax加上動態程序做成上下移動順序
- Visa簽證服務商建站解決方案
- Vista中使用IIS 7.0三個常見問題
- 8種Python字符串拼接的方法,你知道幾種
- 旅行社網站模板默認風格1
- 默認系統
- 共有0條關于《jquery獲取不同類型表單值的方式》的評論
- 發表評論
您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。
- 更多>>同類信息
- javascript獲取瀏覽器指紋可以用來做投票
- 火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
- DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
- js指定日期加n天加n月加n年
- jquery中動態生成的代碼使用on hover事件時不出現效果
- iframe里阻止_blank彈出新窗口的方法